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

vlf7wbxs  于 2023-05-18  发布在  Vue.js
关注(0)|答案(6)|浏览(207)

我有一个Vue组件,类似于below:

<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循环时,我如何获得索引?

t8e9dugd

t8e9dugd1#

声明一个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>

Official docs section -Map数组到元素v-for(强调我的):
v-for块中,我们可以完全访问父作用域属性。v-for还支持当前项的索引可选的第二个参数。

kqlmhetl

kqlmhetl2#

用途

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

对象

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

对于阵列

iq0todco

iq0todco3#

创建一个新方法:

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

vohkndzv

vohkndzv4#

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

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

</div>

另一种方法:

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

</div>
7eumitmz

7eumitmz5#

**更新的答案::**你有索引数组为:"["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>
kqhtkvqz

kqhtkvqz6#

<div v-for="(item, index ) in arrayData" :key="index">
        <p>{{index+1}}</p>
</div>

相关问题