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

У меня есть компонент Vue, такой как bellow:

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

</div>

... 

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

Как я могу получить индекс, когда я выполняю for-loop в моем vue.Яш?

6
vue.js

2 ответов

объявления index переменной:

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

</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="index">
    {{ index }}: {{ item.name }}
  </div>
</div>

официальный раздел документов -отображение массива на элементы с помощью v-for (выделено мной):

внутри v-for блоки у нас есть полный доступ к свойствам родительской области. v-for поддерживает необязательный второй аргумент для индекса текущего элемента.

9

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

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

</div>

и другой способ:

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

</div>
2