【Ver3.14.4 ~ 】x-model Not Working on Dynamically Created Elements with Livewire 2.x

[s-kitade]

Description

When dynamically creating elements in a Livewire 2.x component, I encountered an issue where x-model bindings in Alpine.js are not functioning as expected. Specifically, the data binding between Livewire and Alpine.js does not work on the newly added elements, even though the DOM is properly updated.

This was working correctly up until version 3.13.

• Regression in x-init behavior since v3.14.4 with Laravel/Livewire integration #4453

2024-12-03.10.24.57.mov

public $count = 1;

public function addCount()
{
    $this->count++;
}

 <h2>Alpine.js ver 3.14.6</h2>
<button wire:click="addCount()">add</button>

<div id="your-element-id" x-data="{ text :'' }">
    <span x-text="text"></span><br/>
    @for($i = 0;$i < $count;$i++)
        <input type="text" x-model="text">
    @endfor
</div>

Potential Workarounds:

I tried reinitializing Alpine.js using Alpine.initTree() after the Livewire update, but the issue persists. This suggests a deeper integration issue between Livewire and Alpine.js.

Any guidance or suggestions would be appreciated!

[SimoTod]

Which version of Livewire? I suspect the latest releases are only compatible with Livewire 3