How can I change my `.leex` into `.heex` when I using alpine.js?

Questions / Help
,
1

I have an old .leex

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div style="width:30%;margin: 0 auto;" x-data>
<p><%= live_flash(@flash, :info) %></p>
<p><%= live_flash(@flash, :error) %></p>
<%= for contract <- @contracts  do%>
    <p><b>addr:</b> <%= contract.addr %></p>
    <p><%= raw(Earmark.as_html!("** chain:** `#{contract.chain.name}`")) %></p>
    <p><b> description:</b> <%= contract.description %></p>
    <div x-data="{ abi: '<%= Poison.encode!(contract.contract_template.abi) %>'}">
        <button @click="navigator.clipboard.writeText(abi);">copy abi</button>
    </div>
    <button>see souce code</button>
    <hr>
<% end %>
</div>

I meet a problem when I want to update it to heex in this code:

<div x-data="{ abi: '<%= Poison.encode!(contract.contract_template.abi) %>'}">

change it into <div x-data="{ abi: '{Poison.encode!(contract.contract_template.abi) }'}"> as the docs of heex said is useless.

What can I do for this problem?

2

Have a closer look at this Phoenix.LiveView.Helpers — Phoenix LiveView v0.17.11

This section shows how to define attributes in heex

3

It’s not work.
Both of <div x-data="{ abi: '{Poison.encode!(contract.contract_template.abi) }'}"> and <div x-data="{ abi: {Poison.encode!(contract.contract_template.abi) }}"> are not working.

So, and ways that I can working with both of heex and alpine?

4

Finally I find this works:

x-data={"{username: '#{@current_user.username}'}"}

Heex and Alpine

Thx, bro.

5

Have a look at this example from the docs:

<div class={"btn btn-#{@type}"}>

First notice the {} and second the elixir string interpolation notation: #{}

So you need to change your code to use these.

1 Like