javascript - 如何在 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>

但是由于我的元素已经有 key ，所以结果如下:

<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 here 。如果您想了解更多有关 Vue.js 的信息，希望您可以查看我的 Vue.js training course 。如果这个答案有帮助，我希望您将其标记为这样，并投票支持该项目。