PJUllrich
I updated a project to the latest Phoenix LiveView 0.17.2 and can’t figure out how to pass assigns to a LiveComponent. I guess I need some kind of “spread operator” here, but don’t know the proper syntax.
Previous code:
<%= live_component @socket, Web.MyModule, Map.merge(assigns, %{id: "my-component-id"}) %>
My attempts:
# Sets an `assigns` assign on the `assigns` of the LiveComponent (got it? :D)
# So, in the LiveComponent I have now `assigns.assigns.my_var` instead of
# having @my_var or assigns.my_var
<.live_component module={Web.AddressChangeLive.ChangeComponent}, id="change-component", assigns />
# In this case, `module` and `id` are `nil`
<.live_component Map.merge(assigns, %{module={Web.AddressChangeLive.ChangeComponent}, id="change-component"}) />
Could you hep me further, please?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Bringing learning, work and compliance together since 1987.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
moogle19
You have to remove the
,in your<.live_component />tag (just like in normal html) and you can give the assigns as last argument, e.g.:Edit: Take a look at Cost of stateful components in the documentation
seb3s
Hi,
you should try something like :
<.live_component module={Web.MyModule} id="your_id" {assigns} />But generally, you should pass to your components only the data it uses (not all the assigns map)
Also note that the commas are removed (normal HTML attributes)
Cheers,
Sébastien.
PJUllrich
Ah yes! The comma was the problem! I’d like to accept both answers but since I can select only one I will choose the earliest
Thank you both though!
moogle19
Then I won’t edit my post to add a link to the documentation next time.
PJUllrich
Nooo! I was confused since your post was at the top, but the timestamp was later and I was on the phone and just thought maybe it’s a problem with a spotty connection
I accepted your answer now 