Как получить индекс v-for в Vue.js?

У меня есть компонент Vue, например, ниже:

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

</div>

... 

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

Как я могу получить индекс при выполнении цикла for в моем vue.js?

Ответ 1

Объявите переменную index:

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

</div>

Demo:

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>

Ответ 2

Вы можете использовать '$ index' для получения индекса v-for.

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

</div>

и другой метод:

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

</div>

Ответ 3

Создайте метод:

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

Если ключи массива нумеруются, начиная с нуля. items [0], items [1] и т.д..
Вы можете использовать ключи массива

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

Но если ключи массива имеют тип String, вы можете сделать

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

Вторая версия использует "счетчик" из цикла v-for.

Ответ 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>