How to pass assigns to live component`s Alpine JS code

Phoenix Forum Questions / Help
, ,
1

Hello everybody! I have a live component that contains Alpine JS code

 def render(assigns) do
  ~H"""
  <div id={"#{@id}"} >
    <div x-data="{open: @show}" x-text="open">
    <h1>Hello</h1>
    </div>
    </div>
  """
  end

Passed id works as intended, but @show option is not. I have an error in the browser`s console Uncaught SyntaxError: illegal character U+0040 which in turn means that Alpine does not interpret @show as a component assignment.

2

should be

    <div x-data={"{open: #{@show}}"} x-text="open">
2 Likes