Menggunakan Directive Bawaan di Vue.js: v-if, v-for, dan v-model

Dalam pengembangan aplikasi web menggunakan Vue.js, ada tiga hal yang sering kita lakukan: menampilkan elemen secara kondisional, membuat daftar elemen dari data, dan mengikat input form ke data yang bisa diperbarui secara reaktif. Ketiga hal ini bisa dilakukan dengan sangat mudah berkat apa yang disebut sebagai directive bawaan Vue.

Directive adalah atribut khusus dalam template Vue yang diawali dengan v-, dan memungkinkan kita untuk mengikat perilaku khusus ke elemen DOM. Dalam artikel ini, kita akan membahas tiga directive paling sering digunakan: v-if, v-for, dan v-model. Dengan memahami cara kerja dan praktik terbaik ketiganya, kamu akan lebih siap membangun antarmuka pengguna yang dinamis dan responsif.

1. v-if – Mengatur Tampilan Elemen Berdasarkan Kondisi

Directive v-if digunakan untuk merender elemen HTML hanya jika kondisi tertentu terpenuhi. Artinya, Vue akan menyisipkan atau menghapus elemen dari DOM secara dinamis sesuai dengan ekspresi yang diberikan. Hal ini sangat berguna ketika kita ingin menampilkan bagian UI hanya pada saat tertentu, seperti saat pengguna sudah login, saat ada data yang tersedia, atau saat proses tertentu selesai.

Salah satu keuntungan v-if dibanding hanya menggunakan CSS untuk menyembunyikan elemen (display: none) adalah efisiensi dan kebersihan DOM. Elemen yang tidak perlu ditampilkan tidak akan berada di DOM sama sekali, sehingga kinerja aplikasi lebih optimal.

Contoh Penggunaan `v-if`

<template>
  <div>
    <button @click="toggle">Tampilkan/Sembunyikan</button>
    <p v-if="isVisible">Teks ini hanya muncul jika isVisible = true</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

function toggle() {
  isVisible.value = !isVisible.value;
}
</script>

Pada contoh di atas:

isVisible adalah sebuah reactive variable yang menentukan apakah paragraf <p> ditampilkan atau tidak.
Ketika tombol diklik, fungsi toggle() akan membalik nilai isVisible.
v-if="isVisible" memastikan bahwa paragraf hanya dimunculkan di DOM ketika nilainya true.

2. v-for – Merender Daftar Elemen Secara Dinamis

Dalam banyak aplikasi web, kita perlu merender daftar data dari array atau objek — seperti daftar produk, komentar, atau item menu. Vue menyediakan directive v-for untuk menangani hal ini dengan cara yang sangat elegan dan efisien.

Dengan v-for, kita bisa dengan mudah mengulang elemen template untuk setiap item dalam array. Vue juga mendukung destructuring dan menyediakan akses ke index dari iterasi saat dibutuhkan. Penting juga untuk menyertakan atribut :key yang unik, agar Vue bisa melacak elemen dengan benar dan mengoptimalkan performa re-rendering.

Contoh Penggunaan `v-for`

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</template>

<script setup>
const items = ['Apel', 'Jeruk', 'Mangga'];
</script>

Penjelasan:

Kita menggunakan v-for="(item, index) in items" untuk mengulang setiap nilai dalam array items.
Atribut :key="index" disarankan agar Vue bisa melakukan DOM diffing secara efisien. Namun dalam praktik nyata, lebih baik gunakan ID unik jika tersedia (misalnya item.id).
Elemen <li> akan dirender sebanyak panjang array items, dengan konten yang disesuaikan.

Iterasi dengan Objek

Vue juga memungkinkan iterasi terhadap objek, bukan hanya array. Ini berguna jika kita ingin menampilkan pasangan key: value.

<template>
  <div v-for="(value, key) in user" :key="key">
    {{ key }}: {{ value }}
  </div>
</template>

<script setup>
const user = {
  nama: 'Budi',
  umur: 30,
  kota: 'Jakarta'
};
</script>

3. v-model – Binding Dua Arah Antara Data dan Form

Salah satu keunggulan Vue adalah data binding dua arah (two-way binding) yang sangat mudah digunakan berkat v-model. Directive ini menghubungkan data model (variabel dalam JavaScript) dengan elemen input form di DOM. Ketika pengguna mengubah nilai input, data model akan diperbarui secara otomatis, dan sebaliknya — jika model diperbarui melalui JavaScript, input juga akan mencerminkan perubahan tersebut.

Ini sangat berguna untuk form interaktif seperti login, pendaftaran, filter pencarian, dan lainnya. Vue menangani event-event seperti input, change, dan checked di balik layar, sehingga kita tidak perlu menulis event listener secara manual.

Contoh Penggunaan `v-model`

<template>
  <div>
    <input v-model="nama" placeholder="Masukkan nama" />
    <p>Halo, {{ nama }}!</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const nama = ref('');
</script>

Penjelasan:

Input akan secara otomatis memperbarui variabel nama setiap kali user mengetik.
Paragraf <p> akan memperbarui teks secara langsung berdasarkan isi variabel nama, tanpa perlu event handler tambahan.

v-model pada Checkbox dan Select

Vue juga mendukung penggunaan v-model untuk elemen checkbox, radio, dan select.

<!-- Checkbox -->
<input type="checkbox" v-model="isChecked" />
<p>{{ isChecked ? 'Dicentang' : 'Belum dicentang' }}</p>

<!-- Select -->
<select v-model="pilihan">
  <option value="a">Pilihan A</option>
  <option value="b">Pilihan B</option>
</select>
<p>Terpilih: {{ pilihan }}</p>

Untuk select, nilai terpilih langsung terikat pada model pilihan.

Untuk checkbox, variabel boolean akan mencerminkan status centang.

Studi Kasus: Formulir Pendaftaran

Berikut contoh yang menggabungkan v-if, v-for, dan v-model dalam satu komponen kecil:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>Nama:</label>
      <input v-model="form.nama" />
    </div>

    <div>
      <label>Hobi:</label>
      <div v-for="(hobi, index) in hobiTersedia" :key="index">
        <input
          type="checkbox"
          :value="hobi"
          v-model="form.hobiDipilih"
        />
        {{ hobi }}
      </div>
    </div>

    <div v-if="form.hobiDipilih.length === 0">
      <p style="color: red;">Pilih minimal satu hobi!</p>
    </div>

    <button type="submit">Kirim</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const hobiTersedia = ['Membaca', 'Olahraga', 'Bermain Musik'];

const form = ref({
  nama: '',
  hobiDipilih: []
});

function submitForm() {
  alert(`Nama: ${form.value.nama}\nHobi: ${form.value.hobiDipilih.join(', ')}`);
}
</script>

Tips dan Best Practice

Selalu gunakan :key dalam v-for untuk mencegah rendering yang tidak diinginkan.
Jangan gunakan index sebagai key kecuali memang tidak ada nilai unik lain.
Gunakan v-if untuk kondisi yang memengaruhi rendering DOM besar. Untuk tampilan kecil, v-show bisa lebih efisien.
Hindari overuse v-if dan v-for dalam satu elemen (v-if dan v-for di elemen yang sama dapat menyebabkan masalah). Gunakan computed properties untuk memfilter data.

Directive bawaan seperti v-if, v-for, dan v-model adalah alat dasar namun sangat kuat dalam Vue.js. Mereka membantu kita menangani tampilan yang dinamis, membuat daftar berdasarkan data, dan mengikat data pengguna ke antarmuka dengan cara yang reaktif.

Dengan memahami bagaimana masing-masing directive bekerja, kamu bisa membangun aplikasi Vue yang lebih interaktif, efisien, dan mudah dipelihara. Jangan ragu untuk mengombinasikan ketiganya dalam satu komponen saat diperlukan — Vue dirancang untuk fleksibilitas seperti ini.

Categories:Vue Js