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

Gil理查德2020-03-12

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

猿AJim2020/03/12 15:57:26

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

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

</div>

另一种方法：

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

</div>

DavaidAPro2020/03/12 15:57:26

创建一个方法：

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

如果阵列键已编号，则从零开始。 items [0]，items [1]等。
您可以使用阵列的键

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

但是，如果数组键是typeof String，则可以

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

第二个版本使用v-for循环中的“计数器”。

Newest Answer