Sebb

Sebb

Delegating slot inner-content and attributes to a component

I want to build a custom select.
I need to render all options (when expanded) and always the selected option additionally at the top.

<.select>
   <:opt label="label1">opt-inner-1</:opt>
   <:opt label="label2" selected>opt-inner-2</:opt>
</.select>

will render like

selected: opt-inner-2
opt-inner-1
opt-inner-2

I want the options rendered in an extra component.
But I can’t just delegate the inner-block to the option component.

I tried this:

def select(assigns) do
  assigns = assign_new(assigns, :selected, fn -> Enum.find(assigns.opt, & &1[:selected]) end)

  ~H"""
  <div>
    <div>selected: <%= @selected.label %></div>
    <%= for opt <- @opt do %>
      <.option {opt} />
    <% end %>
  </div>
  """
end

def option(assigns) do
  ~H"""
  <div style="padding: 1rem">
    <div><%= @label %></div>
    <div :if={@inner_block}>
      (want to render inner block) <%!-- <%= render_slot(@inner_block) %> --%>
    </div>
  </div>
  """
end

Marked As Solved

LostKobrakai

LostKobrakai

You’re not providing @inner_block to <.option />:
<.option {opt}><%= render_slot(opt) %></.option>

Also Liked

LostKobrakai

LostKobrakai

LV doesn’t allow passing slots like that.

Sebb

Sebb

It’s amazing how flexible and easy this all is. LV is just a masterpiece.

Where Next?

Popular in Questions Top

belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
hpopp
To simplify some tasks at work, I wrote and published this package yesterday. It’s a simple macro that enables Access behaviour on struct...
New
Codball
Mix format works fine if run from the cmd. I’ve followed this to facilitate the implementation into VSC which involves downloading an ext...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

We're in Beta

About us Mission Statement