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

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
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
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
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
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Phillipp
Hey, I have a NanoPi-M3 and try to install Elixir on their Ubuntu image. I followed the Raspberry Pi installation instructions from the ...
New
mathew4509
I have a list say x = ["23gh", "56kh", "97mh"] I would like to pass each element to Val in each iteration. Say, in iteration 1 -------...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
Jim
As a follow up to my earlier question: I have the code compiling and running but not getting a successful login from the rest server. ...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
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
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
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
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New

We're in Beta

About us Mission Statement