X-data Repeated When Using AlpineJS + Phoenix LiveView

Here’s a weird one. I’ve got Alpine set up in my app, just trying to do simple tabs. I’ve found that entries which use x-data are duplicated.

The example from the docs:

<ul class="list-desc" x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
  <template x-for="color in colors">
    <li x-text="color"></li>
  </template>
</ul>

displays “Red Orange Yellow Red Orange Yellow” on the page, or “Red Orange Yellow Red Orange Yellow Red Orange Yellow” on the page if loaded via data-phx-link="redirect" data-phx-link-state="push". It seems like Alpine is “working”, but not working as expected.

Does anybody have any idea what’s going on here?
Cheers!

2 Likes

it might be rendering a second time after the live view connects on mount and does a second render. can you try adding phx-update=“ignore” to your ul or template tags?