如何在 Vue.js 中获取 v-for 索引？

Question

我有一个像下面这样的 Vue 组件：

 <div v-for="item in items" :key="there I want get the for-loop index"  >

</div>

...

data(){
  items: [{name:'a'}, {name:'b'}...]
}

在 vue.js 中执行 for 循环时如何获取索引？

原文由 sof-03 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

声明一个 index 变量：

 <div v-for="(item, index) in items" :key="item.name">

</div>

演示：

 new Vue({
  el: '#app',
  data: {
    items: [{name: 'a'}, {name: 'b'}]
  }
})

 <script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in items" :key="item.name">
    {{ index }}: {{ item.name }}
  </div>
</div>

官方文档部分 - 使用 v-for 将数组映射到元素（强调我的）：

在 v-for 块内，我们可以完全访问父范围属性。 v-for 还支持当前项目 索引的可选第二个参数。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

创建一个新方法：

 methods: {
    incrementIndex(key) {
        return key + 1;
    },
},

如果数组键被编号，从零开始，如 items[0] ， items[1] ， etc.. ，您可以使用数组的键：

 <div v-for="(item, key) in items" :key="key">
    {{ incrementIndex(key) }}
</div>

但是如果数组的键是 typeof String 那么你可以这样做：

 <div v-for="(item, key, index) in items" :key="key">
    {{ incrementIndex(index) }}
</div>

第二个版本使用来自 counter v-for 循环的 —。

原文由 Yidir 发布，翻译遵循 CC BY-SA 4.0 许可协议