Alpine JS с неправильным идентификатором

В настоящее время я создаю таблицу данных с помощью Laravel Livewire и использую 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;
    },

Вот что происходит, когда я пытаюсь удалить статью с идентификатором 36, в console.log будет записан идентификатор статьи, равный 36 Перед переходом

Затем я перехожу на следующую страницу и пытаюсь удалить статью с идентификатором 46, но в console.log остается 36, я ожидал 46 После навигации

Как решить эту проблему?


laravel-livewire alpine.js
person Sherwin Variancia    schedule 04.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Заменить x-on: щелкнуть для подключения: щелкнуть

<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;
      })
    }
person Sherwin Variancia    schedule 05.10.2020