List Rendering — Vue

v-for const buah = ref(["Apel", "Mangga", "Jeruk"]) ---template--- {{ item }} Dengan Index const items = ref(["A", "B", "C"]) ---template--- {{ index + 1 }}…

v-for

const buah = ref(["Apel", "Mangga", "Jeruk"])

---template---
<ul>
  <li v-for="item in buah" :key="item">{{ item }}</li>
</ul>

Dengan Index

const items = ref(["A", "B", "C"])

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

Iterasi Object

const user = reactive({ name: "Budi", age: 25, city: "Jakarta" })

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

Key Prop

Selalu gunakan :key yang unik agar Vue bisa melacak perubahan dengan efisien.

Yang akan kamu pelajari