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