rottenfishbone

rottenfishbone

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.

Showing Posts 1 to 2

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!

rottenfishbone

rottenfishbone OP

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.

— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
apz
I’m new to elixir and just tried to install the elixirLS extension for VScode(ium) and it is throwing some errors that I would like help ...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews