我有这个Vue代码:
var itembox = new Vue({
el: '#itembox',
data: {
items: {
cookiesncreme: {
name: "Cookies N Cream",
description: "description"
},
chocolateswirl: {
name: "Chocolate Swirl",
description: "description"
},
peanutbutter: {
name: "Peanut Butter",
description: "description"
}
}
}
});
这个HTML代码:
<div id="itembox">
<div v-for="(item, index) in items">{{ index }} - "{{ item.name }}"</div>
</div>
我正在尝试在编号列表中输出代码,例如:
<div>1 - Cookies N Creme</div>
<div>2 - Chocolate Swirl</div>
<div>3 - Peanut Butter</div>
但由于我的商品已经有了钥匙,所以就像这样:
<div>cookiesncreme - Cookies N Creme</div>
<div>chocolateswirl - Chocolate Swirl</div>
<div>peanutbutter - Peanut Butter</div>
是否还有其他方法可以为每件商品计算数量?谢谢!
答案 0 :(得分:2)
在Vue.js中,实际上是第三个参数,在这种情况下你可以传递。例如,您可以这样做:
<div id="itembox">
<div v-for="(item, index, i) in items">{{ i+1 }} - {{ index }} - "{{ item.name }}"</div>
</div>
注意我是如何使用i
参数的,这实际上是索引号。我已经创建了一个有效的小提琴here。如果您想了解有关Vue.js的更多信息,我希望您能查看我的Vue.js training course。如果这个答案有所帮助,我希望你能将其标记为此并投票赞成该项目。
答案 1 :(得分:0)
参阅文档Vue API: v-for
或者,您也可以为索引指定别名(如果在对象上使用,则指定密钥):
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div>