當使用 v-for 顯示重複資料時，直覺都會想到 Array，事實上 ECMAScript 的 Object 也是一種 Container，而 v-for 也支援 Object，在有些情境使用 Object 會比 Array 方便。
Version
Vue 2.6.11
Array
資料為 Object Array，可使用 v-for 加以顯示。
<template>
<div>
<ul>
<li v-for="(x, index) in books" :key="index">
{{ x.title }} / {{ x.price }}
</li>
</ul>
</div>
</template>
<script>
export default {
data: () => ({
books: [
{ title: 'FP in JavaScript', price: 100 },
{ title: 'RxJS in Action', price: 200 },
{ title: 'Speaking JavaScript', price: 300 }
]
})
}
</script>
13 行
data: () => ({
books: [
{ title: 'FP in JavaScript', price: 100 },
{ title: 'RxJS in Action', price: 200 },
{ title: 'Speaking JavaScript', price: 300 }
]
})
books 為 Object Array。
第 4 行
<li v-for="(x, index) in books" :key="index">
{{ x.title }} / {{ x.price }}
</li>
使用 v-for 搭配 Array 顯示重複資料。
Object
<template>
<div>
<ul>
<li v-for="(v, k) in books" :key="k">
{{ k }} / {{ v }}
</li>
</ul>
</div>
</template>
<script>
export default {
data: () => ({
books: {
'FP in JavaScript': 100,
'RxJS in Action': 200 ,
'Speaking JavaScript': 300
}
})
}
</script>
13 行
data: () => ({
books: {
'FP in JavaScript': 100,
'RxJS in Action': 200 ,
'Speaking JavaScript': 300
}
})
將 books 改以 Object 表示。
第 4 行
<li v-for="(v, k) in books" :key="k">
{{ k }} / {{ v }}
</li>
v-for 也支援 Object。
- 第一個 argument 為 Object 的 property value
- 第二個 argument 為 Object 的 property key
如此就能順利的取得 Object 的 key / value 了。
Conclusion
- 使用
v-for別只想到 Array，事實上有些需求直接使用 Object 可能更方便