如何使用Vue中的v-for计算每个项目的计数？

Question

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

是否有其他方法可以得到每个项目的数字计数？谢谢！！

Answer 1

在Vue.js中，实际上有第三个参数可以在本例中传递。例如，您可以这样做：

<div id="itembox">
    <div v-for="(item, index, i) in items">{{ i+1 }} - {{ index }} - "{{ item.name }}"</div>
</div>

请注意我是如何使用i参数的，它实际上是索引号。我已经为这个这里创建了一个工作Fiddle。如果您想了解更多关于Vue.js的信息，我希望您可以查看我的Vue.js培训课程。如果这个答案有帮助的话，我希望你能把它记下来，投票给这个项目。

Answer 2

文档Vue API: v-for的实现

或者，还可以为索引指定别名(如果在对象上使用键)：