Vue

List Rendering: v-for

Penjelasan

v-for="item in daftar" dipakai untuk menampilkan array data sebagai daftar elemen berulang. Sama seperti React, tiap elemen hasil v-for WAJIB diberi atribut :key unik — dipakai Vue di baliknya untuk melacak elemen mana yang berubah/ditambah/dihapus secara efisien.

Contoh Konsep

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

const bahasa = ref(['JavaScript', 'TypeScript', 'PHP']);
</script>

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

Praktikum

Buat ref() produk berisi array 3 objek {id, nama}. Tampilkan sebagai daftar <li> lewat v-for, memakai item.id sebagai :key (bukan index array).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Sama seperti React, pakai ID unik dari data (mis. item.id) sebagai :key, JANGAN pakai index array kalau daftarnya bisa berubah urutan/ditambah/dihapus di tengah — index sebagai key bisa membuat Vue salah mencocokkan elemen lama dengan baru.

← Kembali Conditional Rendering: v-if, v-else, v-show Lanjutkan → Forms & v-model