Belajar Alpine.js Dasar #5: Conditional Rendering

• Mengenal x-show
  • Contoh:
  • Kelebihan x-show:
• Mengenal x-if
  • Contoh:
  • Kenapa pakai <template>?
  • Kelebihan x-if:
• Perbedaan Singkat: x-show vs x-if
• Contoh Gabungan
• Kesimpulan

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana menggunakan x-model untuk menghubungkan input form dengan data di Alpine.js. Nah, sekarang kita akan masuk ke topik yang tak kalah penting, yaitu menampilkan elemen berdasarkan kondisi tertentu menggunakan x-show dan x-if.

Keduanya digunakan untuk conditional rendering, tapi masing-masing punya cara kerja yang berbeda. Yuk kita bahas satu per satu!

Mengenal x-show

Directive x-show digunakan untuk menyembunyikan atau menampilkan elemen berdasarkan kondisi. Di balik layar, Alpine akan mengatur properti CSS display: none jika kondisi bernilai false.

• Contoh:

  <div x-data="{ tampil: true }">
    <button @click="tampil = !tampil">Toggle</button>
    <p x-show="tampil">Ini akan tampil atau tersembunyi</p>
  </div>
  

  Ketika tombol diklik, nilai tampil akan berubah, dan elemen <p> akan muncul atau hilang tergantung nilainya.

• Kelebihan x-show:

  • Elemen tetap ada di DOM.
  • Perubahan cepat karena hanya mengubah gaya CSS.
  • Cocok untuk efek transisi/animasi.

Mengenal x-if

Berbeda dengan x-show, x-if benar-benar menambah atau menghapus elemen dari DOM. Artinya, kalau kondisinya false, elemen tersebut tidak akan ada sama sekali di HTML.

• Contoh:

  <div x-data="{ login: false }">
    <button @click="login = !login">Login/Logout</button>
    <template x-if="login">
      <p>Selamat datang, pengguna!</p>
    </template>
  </div>
  

• Kenapa pakai <template>?

  Directive x-if harus digunakan di dalam elemen <template>, karena Alpine perlu tahu bahwa ini adalah blok yang bisa di-render ulang dari nol.

• Kelebihan x-if:

  • Lebih ringan kalau elemen punya banyak isi.
  • Cocok untuk kondisi yang jarang berubah.
  • Aman untuk elemen yang butuh inisialisasi ulang saat muncul.

Perbedaan Singkat: x-show vs x-if

Contoh Gabungan

<div x-data="{ mode: 'edit' }">
  <button @click="mode = mode === 'edit' ? 'view' : 'edit'">
    Ganti Mode
  </button>

  <p x-show="mode === 'view'">Mode Tampilan</p>

  <template x-if="mode === 'edit'">
    <p>Mode Edit Aktif</p>
  </template>
</div>

Di contoh di atas, kita pakai x-show untuk mode tampilan dan x-if untuk mode edit. Ini menunjukkan bahwa kita bisa memakai keduanya dalam satu komponen, tergantung kebutuhan.

Kesimpulan

Di artikel ini, kita telah mengenal dua directive penting untuk kondisi: x-show dan x-if. Keduanya membantu kita mengontrol tampilan berdasarkan data. Gunakan x-show untuk perubahan cepat dan x-if untuk pengelolaan elemen yang lebih dinamis.

Di artikel berikutnya, kita akan membahas Looping, yaitu cara menampilkan daftar item seperti array atau list menggunakan Alpine.js.

Terima Kasih