ในวันนี้ผมจะพามารู้จักกับ directive wire:confirm ที่เพิ่งถูกปล่อยออกมา ใน Laravel Livewire 3 กันนะครับ โดย directive นี้จะช่วยให้เราเพิ่ม Confirmation Dialog ก่อนที่เราจะทำการ submit ข้อมูลอะไรที่ต้องมีการยืนยันก่อนดำเนินการ คำสั่งนี้จะทำงานเหมือนกับ native javascript function confirm() เลย โดยจะเป็นการเรียกผ่าน Livewire โดยที่เราไม่ต้องเขียนฟังก์ชัน Javascript  เพิ่มขึ้นมาเอง

เทียบกับ Javascript คือแบบนี้

if (window.confirm("ยืนยันว่าจะลบผู้ใช้คนนี้จริง ๆ นะ?")) {
  //  ยืนยันแล้ว ลบได้เลย
}

วิธีการเรียก Confirm ผ่าน Livewire มี 2 แบบ ตามนี้

1. Confirm Dialog

สำหรับ Confirm Dialog ง่าย ๆ ที่ให้กด OK หรือ Cancel ก็คือใช้ directive wire:confirm คู่กับ Event อย่างเช่น wire:click ตามตัวอย่าง

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

พอเรากดปุ่ม Livewire จะเรียก confirm modal บนเบราเซอร์ให้เราเอง

Prompt Dialog

ทีนี้ถ้าเราจะ Advance ขึ้นไปอีกแบบว่าอยากให้ผู้ใช้พิมพ์ข้อความอะไรเข้ามาก่อน แบบยืนยันว่าต้องการลบข้อมูลที่สำคัญจริง ๆ เหมือนที่เราเคยเห็นแบบตอนลบ Repository ใน Github แบบนี้ ก็ใช้ modifier prompt ต่อท้าย wire:confirm

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

สังเกตท่อน |DELETE ด้านท้าย คือข้อความที่ผู้ใช้ต้องพิมพ์เข้ามาให้ถูกต้องตอนขึ้น Prompt

จากด้านบนพอผู้ใช้กดปุ่ม จะขึ้น Popup  prompt() มาให้ผู้ใช้พิมพ์คำว่า "DELETE" ให้ถูกต้อง แล้ว Livewire จะเรียก method delete() ใน Component ให้เราตามปกติ

อ้างอิง

•  อ่านเพิ่มเติมได้ที่ Document ของ Livewire ได้เลยครับ https://livewire.laravel.com/docs/wire-confirm
• ที่มา https://laravel-news.com/how-to-add-a-confirmation-dialog-with-livewire