rottenfishbone

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

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

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.

Where Next?

Popular in Questions Top

srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
Werner
Hi, I’m using Ubuntu 18.04 and after updating to OTP-24.0 yesterday i have this warning when I run “mix local.hex”: 14:57:30.512 [warn] ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
Kagamiiiii
Student &amp; New to elixir. Nice language. I want to convert a english character, e.g. “a”, which is stored in a variable, to it’s asci...
New
lk-geimfari
What is most correct way to open, read and parse JSON file with poison? For example if we have example.json file in root of some projec...
New
Fl4m3Ph03n1x
Background Let’s assume I have a typical GenServer that receives messages as requests, does some operation in a DB and returns responses....
New
gonzofish
I’m currently trying to understand how to join three tables using Ecto. All the examples I’ve seen use 2, so maybe I’m just missing somet...
New
chewm
Hi guys, nice to meet you to the whole forum, I’m new here, I’m trying to configure visual studio code for elixir, right now the intellis...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
wernerlaude
In AR this is so simple @articles = current_user.articles How to do in Ecto? def index(conn, _params) do current_user = conn.assig...
New

Other popular topics Top

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
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
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
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
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
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New

We're in Beta

About us Mission Statement