web-dev-qa-db-fra.com

Comment obtenir l'index v-for dans Vue.js?

J'ai un composant Vue comme ci-dessous:

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

</div>

... 

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

Comment puis-je obtenir l'index lorsque j'exécute la boucle for dans mon vue.js?

vue.js
9
sof-03

Déclarez une variable index:

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

</div>

Démo:

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>

Section de documentation officielle - Mappage d'un tableau en éléments avec v-for (c'est moi qui souligne):

Dans les blocs v-for, nous avons un accès complet aux propriétés de la portée parent. v-for supporte également un second argument optionnel pour l'index de l'élément en cours.

18
acdcjunior

Vous pouvez utiliser `$ index` pour obtenir l'index de v-for.

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

</div>

et l'autre méthode:

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

</div>
2
aircraft

Créer une méthode:

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

Si les clés du tableau sont numérotées, en commençant par zéro . éléments [0], éléments [1], etc.
vous pouvez utiliser les clés du tableau

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

Mais si les clés de tableau sont typeof String alors vous pouvez faire

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

La deuxième version utilise le "compteur" de v-for loop.

0
Yidir