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

【问题标题】：How to get the v-for index in Vue.js?如何在 Vue.js 中获取 v-for 索引？
【发布时间】：2018-09-15 11:45:47
【问题描述】：

我有一个像下面这样的 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 循环时如何获取索引？

【问题讨论】：

请记住，使用循环索引并不比完全省略键更好。理想的键选择是唯一标识数组/对象中每个项目的东西。

标签： vue.js

【解决方案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>

官方文档部分 - Mapping an Array to Elements with v-for（强调我的）：

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

【讨论】：

Tom Fenech 的comment 非常真实和重要。 :key="index" 并没有太大帮助。查看rimdev.io/the-v-for-key 了解原因。
@AdamZerner 好提示。前置确实与索引作为键不一致。我将更新示例
@acdcjunior 你能解释一下这部分吗？ “在 v-for 块中，我们可以完全访问父范围属性”这里的父范围属性是什么？感谢您的宝贵时间。
例子中的@KickButtowski，parent是整个app，只有items。如果它有任何其他属性，这些属性将可用。另一个例子是如果在另一个v-for 中有一个v-for。在这种情况下，内部v-for 可以访问在外部v-for（其父范围）中声明的变量。

【解决方案2】：

你可以使用`$index`来获取v-for的索引。

<div v-for="item in items" :key="`$index`"  >

</div>

和其他方法：

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

</div>

【讨论】：

不幸的是，简写 $index 在 Vue 2.x 中被删除了
使用索引作为键是一种反模式

【解决方案3】：

创建一个新方法：

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>

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

【讨论】：

【解决方案4】：

更新答案：： 您将数组索引为："["aaaa","bbbbb"]" 然后是这个脚本。

new Vue({
  el: '#app',
  data: {
    items: ["aaaa","bbbbb"]
  }
})

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

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

【讨论】：