如何在 livewire 中使用 sweetalert2

how to use sweetalert2 in livewire

我尝试在 livewire 中使用 sweetalert2 - 而不是删除一个 post,所有 post 都将被删除 我的问题是什么?

post.list.blade

<button wire:click="deleteConfirm" type="button">delete</button>

分量

public function deleteConfirm(){$this->emit('swal', 'are u sure?', 'warning');}

public function delete(){$this->post->delete();}

我的 js:

const Swal = Swal.mixin({
position: 'center',
showConfirmButton: true,
})

document.addEventListener('livewire:load', () => {
Livewire.on('swal', (message,type) => {
    Swal.fire({
        icon: type,
        text: message,
        showCancelButton: true,
    }).then((result) => {
        if (result.isConfirmed) {
          livewire.emit('delete')
        }
    })
  })
})

通常,当您有一个包含编辑、详细信息、删除等操作的元素列表时,您必须将项目 ID 传递给操作。

post.list.blade

<button wire:click="deleteConfirm({{ $item->id }})" type="button">delete</button>

component

public function deleteConfirm($item_id)
{
  $this->post = Post::where('id',$item_id)->first();
  $this->emit('swal', 'are u sure?', 'warning');
} 

and

public function delete()
{
   if($this->post) {
     $this->post->delete();
     $this->post = null;
   }
}