how to use sweetalert2 in livewire

Question

i'm try to use sweetalert2 in livewire - Instead of deleting one post, all posts will be deleted what is my problem?

post.list.blade

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

component

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

and

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

my 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')
        }
    })
  })
})

Answer 1

If you want to implement confirm dialog/modal/popup on delete/disable some instances with Laravel Livewire with dynamic parameters like id/uuid you can use my guide in use with SweetAlert.

JavaScript: addEventListener method on your page with event object. makeAction and makeActionCancel is LiveWire methods. Official docs

window.addEventListener('swal:confirm', event => {
    Swal.fire({
        title: event.detail.title,
        text: event.detail.text,
        html: event.detail.html,
        icon: event.detail.type,
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#33cc33',
        confirmButtonText: event.detail.confirmButtonText
    }).then((result) => {
        if (result.isConfirmed) {
            window.livewire.emit('makeAction', event.detail.id);
            Swal.fire(
                event.detail.confirmedText,
                event.detail.confirmedDescription,
                'success'
            )
        } else {
            window.livewire.emit('makeActionCancel', event.detail.id);
        }
    })
});

PHP/Laravel/LiveWire. Let's take a look with advanced example if you have checkboxes that are belongs to database [Laravel] model instances that provided with someProps array, so this is a LiveWire model.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

public $someProps = [];

protected $listeners = ['makeAction', 'makeActionCancel'];

class MyComponent extends Component
{
    public function mount()
    {
        $this->someProps = [19521007 => 'WORST', 19760604 => 'BDAYOFAGREATMAN'];
    }

    public function actionConfirm(int $id)
    {
        $model = \App\Models\People::find($id);
        if ($model->id) {
            $this->dispatchBrowserEvent('swal:confirm', [
                'type' => 'warning',
                'title' => __('Are you sure?'),
                'html' => __('Are you <strong>agree</strong>?'),
                'confirmButtonText' => __('SURE???')
                'id' => $id,
                //also you can use here additional variables and pass it to Swal.fire from previous step with addEventListener as event.details object
            ]);
        } else {
            //to be sure the model is at init state if you use checkbox/radio with LiveWire model
            $this->someProps[$id] = 'WORST';
        }
    }

    public function makeAction(int $id)
    {
        //just an example of update
        \App\Models\People::find($id)->update(['description' => 'someDesc']);
        $this->someProps[$id] = 'REALLY WORST';//new value if confirm
    }

    public function makeActionCancel(int $id)
    {
        $model = \App\Models\People::find($id);
        if ($model->id) {
            //to be absolutely sure with LiveWire model state on cancel
            $this->someProps[$id] = 'WORST';//old value if cancel
        }
    }
}

HTML/Blade. $id variable you have to pass [for example] from your someProps array. Keep state with wire:model and handle with wire:change event.

/*INIT SWEETALERT SOMEWHERE IN HEAD OR FOOTER*/
<script src="/path/to/sweetalert2.min.js"></script>
<link rel="stylesheet" href="/path/to/sweetalert2.min.css">

/*OUR LIVEWIRE COMPONENT*/
<div>
    /*SOME HTML HERE*/
    <input type="checkbox" value="{{ $id }}" wire:change="actionConfirm({{ $id }})" wire:model="someProps.{{ $id }}">
</div>

Answer 2

normally, when you have a list of elements with actions like edit, details, delete, etc. you must pass the item id to the action.

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;
   }
}