Alpine JS 使用了错误的 id

Question

我目前正在使用 Laravel Livewire 制作数据 table，并且我使用 AlphineJS 作为确认模式。一切正常，直到我分页到数据的下一页。所以这里 HTML 我的每一行的删除按钮 :

    <a class="mx-1 text-lg" role="button" x-on:click.prevent="onDelete({{ $article->id }})">
       <i class="fas fa-trash"></i>
       <p x-text="{{ $article->id }}"></p>
    </a>

这是 onDelete 的函数

    onDelete(id){
      console.log(id);
      this.confirmationModal = true;
      this.id = id;
    },

这是当我尝试删除 ID 为 36 的文章时发生的情况，它将 console.log 文章的 ID 为 36

然后我导航到下一页并尝试删除 ID 为 46 的文章，但 console.log 仍然是 36，我期待 46

如何解决这个问题？

Answer 1

更改x-on：点击wire:click

<a class="mx-1 text-lg" role="button" wire:click="$emit('onTrashIcon',{{ $article->id }})">
   <i class=" fas fa-trash"></i>
</a>

并添加监听函数 x-data + 不要忘记 x-init="listen()"

    listen() {
      window.livewire.on('onTrashIcon', articleId => {
        this.id = articleId;
        this.confirmationModal = true;
      })
    }

Alpine JS 使用了错误的 id

Alpine JS using wrong id

laravel-livewire

alpine.js