Frage Wie bekomme ich den v-for-Index in Vue.js?


Ich habe eine Vue-Komponente wie folgt:

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

</div>

... 

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

Wie kann ich den Index erhalten, wenn ich die for-Schleife in meiner vue.js ausführe?


5
2018-04-05 15:18


Ursprung


Antworten:


Deklarieren Sie ein index Variable:

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

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

Offizielle Dokumentation - Zuordnen eines Arrays zu Elementen mit v-for (Hervorhebung von mir):

Innerhalb v-for Blöcke haben wir vollen Zugriff auf Eigenschaften des übergeordneten Bereichs. v-for unterstützt auch ein optionales zweites Argument für den Index des aktuellen Artikels.


8
2018-04-05 15:19



Sie können `$ index` verwenden, um den Index von v-for zu erhalten.

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

</div>

und die andere Methode:

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

</div>

1
2018-04-05 15:20