如何在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循环时如何获取索引？

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还支持当前项的索引的可选第二个参数.

Answer 2

使用

 v-for="(value,name,index) in Object" 

对于对象

v-for="(value,index) in Array" 

对于数组

Answer 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>

第二个版本使用counterfromv-for循环。

Answer 4

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

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

</div>

和另一种方法：

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

</div>