Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Conditional Rendering, bagaimana menampilkan atau menyembunyikan elemen dengan v-if, v-else, dan v-show.
Pada artikel kali ini, kita akan membahas tentang List Rendering, yaitu bagaimana cara menampilkan data berupa daftar (array) di Vue menggunakan v-for.
Apa Itu List Rendering?
List Rendering adalah proses menampilkan data dalam bentuk list/daftar berdasarkan array atau object. Di Vue, kita menggunakan directive v-for untuk melakukan iterasi.
Render Array Sederhana
<script setup>
import { ref } from "vue"
const fruits = ref(["Apel", "Jeruk", "Mangga"])
</script>
<template>
<ul>
<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
</ul>
</template>
Penjelasan:
v-for="fruit in fruits" → melakukan looping array fruits.:key="fruit" → setiap item harus punya key unik untuk membantu Vue mengelola DOM.
Render dengan Index
Kita juga bisa mengambil index dari looping.
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
Akan menampilkan daftar dengan nomor urut.
Render Object
Selain array, kita juga bisa looping object.
<script setup>
import { reactive } from "vue"
const user = reactive({
name: "Budi",
age: 20,
city: "Jakarta"
})
</script>
<template>
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</template>
Hasilnya:
name: Budi
age: 20
city: Jakarta
Render Daftar Object
Biasanya data berbentuk array of objects.
<script setup>
import { ref } from "vue"
const users = ref([
{ id: 1, name: "Budi", age: 20 },
{ id: 2, name: "Siti", age: 22 },
{ id: 3, name: "Andi", age: 25 }
])
</script>
<template>
<div v-for="user in users" :key="user.id" class="card">
<h3>{{ user.name }}</h3>
<p>Umur: {{ user.age }}</p>
</div>
</template>
Setiap user ditampilkan dalam card sederhana.
Nested Loop
Kita bisa melakukan nested loop dengan v-for di dalam v-for.
<script setup>
import { ref } from "vue"
const categories = ref([
{ name: "Buah", items: ["Apel", "Mangga", "Jeruk"] },
{ name: "Sayur", items: ["Bayam", "Wortel", "Tomat"] }
])
</script>
<template>
<div v-for="category in categories" :key="category.name">
<h4>{{ category.name }}</h4>
<ul>
<li v-for="item in category.items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
Akan menampilkan daftar kategori beserta item di dalamnya.
Kesimpulan
Pada artikel ini, kita sudah belajar tentang List Rendering di Vue, mulai dari array sederhana, penggunaan index, looping object, daftar object, hingga nested loop. Dengan v-for, kita bisa menampilkan data dalam bentuk daftar dengan mudah dan fleksibel.
Di artikel berikutnya, kita akan membahas tentang Form Binding (v-model), yaitu bagaimana mengikat input form ke state secara reaktif.
Terima kasih