如何在Vue中使用v-for获取每个项目的计数?

时间:2017-06-29 14:17:45

标签: javascript oop vue.js

我有这个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>

是否还有其他方法可以为每件商品计算数量?谢谢!

2 个答案:

答案 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>