AlpineJS dispatch komponen diluar parent div

Untuk memanipulasi elemen HTML dengan bantuan framework AplineJS, biasanya interaksi dilakukan dalam satu blok keluarga saja. Misalnya, element parent (ayah) hanya bisa memerintah ke elemen child (anak).

<div x-data="{ open: false }"> <!-- parent element -->

    <button @click="open = true">Expand</button> <!-- child element -->
 
    <span x-show="open"> <!-- child element -->
        Content...
    </span>

</div>

Bagaimana kalau elemen parent atau elemen child sekalipun bisa menginterupsi keluar dari elemen keluarga mereka. Ceritanya, anak ayah, memberi intruksi ke anak tetangga bahkan ke elemen kepala desa.

Caranya mudah, pakai fungsi magick $dispatch() AlpineJS. “$dispatch is a helpful shortcut for dispatching browser events,” begitu yang tertulis di laman dokumentasi AlpineJS.dev.

Berikut cara penggunaannya.

<!-- Parent child element -->
<div x-data>

  <button  @click="$dispatch('open-neighbor-element')">Click Message</button>

</div>
<!-- ./Parent child element -->

<!-- Parent child neighbor element -->
<div x-data="{ open: false }"  x-show="open" @open-neighbor-element.window="open = !open">

  <p>
    I have received a message from your father. 
  </p>

</div>
<!-- ./Parent child neighbor element -->

Live Demo

Penjelasan kode:

• Baris kode @click="$dispatch('open-neighbor-element')" berfungsi untuk mengikat nilai ke atribut HTML di luar parent.
• Pada elemen div berikutnya, attribut @open-neighbor-element.window="open = !open" menjadi target tujuan interaksi.

Semoga bermanfaat.

Referensi:

• https://stackoverflow.com/questions/70814241/how-to-add-classes-to-an-element-outside-of-alpinejs-element
• https://stackoverflow.com/questions/73012457/access-to-x-data-outside-of-the-scope-in-alpinejs-3?rq=1