Conditional Rendering: v-if & v-show

Menampilkan sesuatu hanya jika…

Hampir semua aplikasi butuh keputusan: tampilkan tombol "Keluar" jika sudah login, tampilkan pesan error jika form salah, tampilkan "Keranjang kosong" jika tidak ada barang. Vue menyediakan directive kondisi untuk itu.

v-if, v-else-if, v-else

<p v-if="login">Selamat datang kembali!</p>
<p v-else>Silakan masuk dulu.</p>

<p v-if="skor >= 80">Nilai A</p>
<p v-else-if="skor >= 60">Nilai B</p>
<p v-else>Nilai C</p>

• v-else dan v-else-if harus diletakkan tepat setelah elemen v-if / v-else-if (tanpa elemen lain di antaranya).
• Elemen yang kondisinya salah tidak ada sama sekali di DOM. Vue membuatnya saat kondisi benar dan menghancurkannya saat salah.

Satu kondisi untuk banyak elemen: <template v-if>

Untuk mengatur beberapa elemen sekaligus tanpa membuat pembungkus tambahan, bungkus dengan <template>. Tag template sendiri tidak dirender.

<template v-if="login">
  <h2>Dashboard</h2>
  <p>Halo, {{ nama }}</p>
  <button>Keluar</button>
</template>

v-show: sembunyi pakai CSS

<p v-show="login">Info anggota</p>

v-show selalu merender elemen, lalu hanya mengganti CSS display: none. Tidak mendukung <template> dan tidak punya v-else.

v-if atau v-show?

v-if bersama v-for

Jangan taruh v-if dan v-for pada elemen yang sama. Di Vue 3, v-if dievaluasi lebih dulu sehingga tidak bisa memakai variabel dari v-for. Filter datanya dulu dengan computed (bab 9) atau bungkus dengan <template v-for>.

Kesalahan umum

• Menyisipkan elemen lain di antara v-if dan v-else → v-else without adjacent v-if.
• Memakai v-show pada <template> (tidak bisa).
• Lupa bahwa input di dalam blok v-if dibuang saat kondisi salah (isinya hilang). Gunakan v-show bila ingin menjaga state.