rottenfishbone
Is it typical behaviour for multiple phx-value-* to require strings?
Using:
defp deps do
[
#...
{:phoenix, "~> 1.7.7"},
{:phoenix_html, "~> 3.3"},
{:phoenix_live_view, "~> 0.20.1"},
#...
]
When defining a function component that has multiple phx-value-* defined using raw elixir types (e.g. phx-value-id={@element.id}, phx-value-name={@element.name}), only a single value is passed to the handle_event params.
However, if I use raw strings or even string templates(?) (e.g. phx-value-id={"#{@element.id}"} this is not an issue.
Here is my case:
#...
<.button
class="btn-error"
phx-click="toggle-disabled"
phx-value-id={@element.id}}
phx-value-disabled={@element.disabled}
data-confirm="Are you sure?">
Toggle
</.button>
#...
Passes %{"id" => "1", "value"=>""} to params
Whereas:
#...
<.button
class="btn-error"
phx-click="toggle-disabled"
phx-value-id={"#{@element.id}"}
phx-value-disabled={"#{@element.disabled}"}
data-confirm="Are you sure?">
Toggle
</.button>
#...
Passes the data as expected. This also works if I only use string literals. phx-value is affected by this as well and stays empty if I define a phx-value-* using an elixir type(? not sure if this is the root cause).
This is defined inside a function component, not a live component. Not sure if that changes this either.
While I have solved my issue by using templates, I’m not sure if this is a bug that should be reported, or expected behaviour.
Marked As Solved
sodapopcan
In short, yes.
HTML works only with strings, so any values you put in the DOM must be converted to a string. The behaviour you’re seeing is likely because setting an attribute to something falsey—ie, nil or false—will cause it to not render at all. While I don’t have an example off the top of my head, this is a convenience feature that I make use of quite often! Otherwise, it’s best to make sure your phx-values are explicitly strings if you think they could be fasley.
And welcome to the forums!
Also Liked
rottenfishbone
That makes sense and I have indeed noticed I get an error about HTML safe when I try to use a type such as a list.
I see now I misunderstood what was happening here with my issues here. I noticed integers would be converted to strings which had me incorrectly assuming a boolean would, as well.
Thanks for the quick reply, and the conditional rendering is actually something I might start using as well.







