List Rendering: v-for & key

Mengulang elemen dengan v-for

Directive v-for membuat satu elemen untuk setiap item dalam kumpulan data. Bentuknya: item in daftar (boleh juga of).

<ul>
  <li v-for="buah in daftarBuah" :key="buah.id">{{ buah.nama }}</li>
</ul>

const daftarBuah = ref([
  { id: 1, nama: 'Apel' },
  { id: 2, nama: 'Jeruk' },
])

Dengan index

<li v-for="(buah, index) in daftarBuah" :key="buah.id">
  {{ index + 1 }}. {{ buah.nama }}
</li>

index dimulai dari 0.

Mengulang objek dan rentang angka

<!-- objek: (nilai, kunci, index) -->
<li v-for="(nilai, kunci) in profil" :key="kunci">{{ kunci }}: {{ nilai }}</li>

<!-- rentang: n = 1..5 -->
<span v-for="n in 5" :key="n">⭐</span>

Mengapa :key itu penting?

Saat daftar berubah (ditambah, dihapus, diurutkan), Vue harus tahu elemen mana yang "sama" dengan sebelumnya supaya hanya memindahkan, bukan membuat ulang semuanya. :key adalah identitas unik tiap item.

Mengubah array secara reaktif

Method yang mengubah array di tempat (mutating) dideteksi Vue:

daftar.value.push(item)        // tambah di akhir
daftar.value.unshift(item)     // tambah di awal
daftar.value.splice(1, 1)      // hapus 1 item di indeks 1
daftar.value.shift()           // hapus item pertama
daftar.value.sort(...) ; daftar.value.reverse()

// atau ganti seluruh array (non-mutating + penugasan)
daftar.value = daftar.value.filter(b => b.id !== 2)

Menampilkan hasil filter/sort

Jangan mengubah data asli hanya untuk tampilan. Buat computed (bab 9) yang menghasilkan salinan terfilter, lalu v-for pada computed itu.

<li v-for="b in buahMurah" :key="b.id">...</li>
const buahMurah = computed(() => daftar.value.filter(b => b.harga < 10000))

Daftar kosong

<p v-if="daftar.length === 0">Belum ada data.</p>
<ul v-else> ... </ul>

v-for pada <template>

<template v-for="b in daftar" :key="b.id">
  <dt>{{ b.nama }}</dt>
  <dd>{{ b.harga }}</dd>
</template>

Kesalahan umum

• Lupa :key (Vue tidak selalu error, tapi bug muncul belakangan).
• Menaruh v-if dan v-for di elemen yang sama.
• Memakai key acak seperti Math.random() — membuat elemen dibuat ulang setiap render.