I have a simple Livewire component that returns a table. Each row has a delete button

Here's a simplified version of my Livewire blade template: <div class="highlight h

This is the order in which I've imported assets: <div class="highlight highlight-t

A newly added alpine component returned from a Livewire component is never initialized about alpine-plugin HOT 3 OPEN

mokhosh commented on September 26, 2024

A newly added alpine component returned from a Livewire component is never initialized

from alpine-plugin.

Comments (3)

mokhosh commented on September 26, 2024

Here's a simplified version of my Livewire blade template:

@foreach($models as $model)
<tr>
    <td>{{ $model->id }}</td>
    <td>{{ $model->name }}</td>
    <td x-data="{ isDeleting: false }">
        <button @click="isDeleting = true">Delete</button>
        <div class="modal" x-show="isDeleting">
            <div class="overlay" @click="isDeleting = false"></div>

            <div class="modal-content">
                <p>Delete {{ $model->name }} model?</p>
                <button wire:click="delete({{ $model->id }})" @click="isDeleting = false">Delete</button>
            </div>
        </div>
    </td>
</tr>
@endforeach

from alpine-plugin.

mokhosh commented on September 26, 2024

This is the order in which I've imported assets:

@livewireScripts {{-- version 0.7.4 --}}
<script src="https://cdn.jsdelivr.net/gh/livewire/alpine-plugin@v0.1.0/dist/livewire-alpine-plugin.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.0/dist/alpine.js" defer></script>

from alpine-plugin.

mokhosh commented on September 26, 2024

I red the code for alpine plugin and alpine's index.js and figured a hacky way to fix this. I put an x-data attribute on my livewire components root element.

But this should work without a hack. if the root element isn't an alpine component but some parts of new html returned by livewire contains tags with x-data they should be initialized.

from alpine-plugin.

Recommend Projects