aceupmysleeves

aceupmysleeves

Snytax troubles: Heex string interpolation in html element's attributes

Hi! I’m working in a liveview and want to fill attributes such as id, for label and title with a value from a for-loop.

<ul>
      <%= for item <- ["apple", "bread", "peanut butter"] do %>
        <li>
          <input type="checkbox" checked="checked" id="<%= item %>" />
          <label class="tree_label" for="<%= item %>"> <%= item %>  </label>
        </li>
      <% end %>
</ul>

but I get this error:
Make sure the attribute is properly closed. This may also happen if
there is an EEx interpolation inside a tag, which is not supported.
Instead of

<div <%= @some_attributes %>>
</div>

do

<div {@some_attributes}>
</div>

but my values are from a loop rather than the socket so the @ doesn’t work nor does adding { } around the item like so:
<input type="checkbox" checked="checked" id="{item}" />
or <input type="checkbox" checked="checked" id="#{item}" />

Most Liked

LostKobrakai

LostKobrakai

The {} and the @ are different parts of the picture.

Element attributes in heex are supplied either as attr="…" for static values or as attr={…} for dynamic values. For the latter can be any elixir code returning a string (or convertable to string data) or a boolean.

There’s also <tag {…}> where can be a keyword list or map of attributes → values.

@var is a macro to access assigns off of the socket. It can be used in either of the places before where elixir code is allowed, but doesn’t need to be used.

lkuty

lkuty

If item is a string (which it is), then the code below is simpler.

<input type=“checkbox” checked=“checked” id={item} />

Where Next?

Popular in Questions Top

_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
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
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
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
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
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
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36128 110
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement