comment peut obtenir index & amp; compter en vuejs

J'ai ce type de code (JSFiddle)

  <li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey}}</li>

Sortie:
cet indice: 0
cet indice: 1

Ma question est:

Comment puis-je obtenir la valeur de l'indice d'abord commencer: 1 par exemple
je veux
de sortie comme ceci:
cet indice: 1
cet indice: 2
Comment puis-je obtenir de compter à partir de l'index, c'est à dire sortie comme ceci:
cet indice: 1
cet indice: 2
ce nombre: 2

source d'informationauteur b4dQuetions

vue.js

vous pouvez simplement ajouter 1

<li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey + 1}}</li>

pour obtenir la longueur d'un tableau/objets

{{ catalogs.length }}

12

Alternativement, vous pouvez simplement utiliser,
```
<li v-for="catalog, key in catalogs">this is index {{++key}}</li>
```
Cela fonctionne très bien.
6

Le SECOND argument optionnel est l'indice, en commençant à 0. Donc à la sortie de l'index et de la longueur totale d'un tableau appelé "some_list':
```
<div>Total Length: {{some_list.length}}</div>
<div v-for="(each, i) in some_list">
  {{i + 1}} : {{each}}
</div>
```
Si au lieu d'une liste, vous étiez en boucle à travers un objet, puis le deuxième argument est la clé de la paire clé/valeur. Donc, pour l'objet 'my_object':
```
var an_id = new Vue({
  el: '#an_id',
  data: {
    my_object: {
        one: 'valueA',
        two: 'valueB'
    }
  }
})
```
La suivante serait d'imprimer la clé : des paires de valeurs. (vous pouvez le nom de "chacun" et " i " tout ce que vous voulez)
```
<div id="an_id">
  <span v-for="(each, i) in my_object">
    {{i}} : {{each}}<br/>
  </span>
</div>
```
Pour plus d'informations sur la Vue de la liste de rendu: https://vuejs.org/v2/guide/list.html
2

L'Aide De Vue 1.x, utilisez la variable spéciale $index comme suit:
```
<li v-for="catalog in catalogs">this index : {{$index + 1}}</li>
```
alternativement, vous pouvez spécifier un alias comme un premier argument pour v-for directive comme suit:
```
<li v-for="(itemObjKey, catalog) in catalogs">
    this index : {{itemObjKey + 1}}
</li>
```
Voir : Vue 1.x guide

L'Aide De Vue 2.x, v-for fournit un deuxième argument optionnel référence l'index de l'élément courant, vous pouvez ajouter 1 dans votre moustache modèle comme on l'a vu:
```
<li v-for="(catalog, itemObjKey) in catalogs">
    this index : {{itemObjKey + 1}}
</li>
```
Voir: Vue 2.x guide

Éliminer les parenthèses dans le v-for syntaxe fonctionne aussi très bien d'où:
```
<li v-for="catalog, itemObjKey in catalogs">
    this index : {{itemObjKey + 1}}
</li>
```
Espère que ça aide.
1

En cas, vos données sont dans la structure suivante, vous obtenez la chaîne comme un indice
```
items = {
   am:"Amharic",
   ar:"Arabic",
   az:"Azerbaijani",
   ba:"Bashkir",
   be:"Belarusian"
}
```
Dans ce cas, vous pouvez utiliser la variable supplémentaire pour obtenir l'indice du nombre:
```
<ul>
  <li v-for="(item, key, index) in items">
    {{ item }} - {{ key }} - {{ index }}
  </li>
</ul>
```
Source: https://alligator.io/vuejs/iterating-v-for/
0

Pourquoi son impression 0,1,2...?

Parce que ceux sont des indices des éléments dans le tableau et index démarre toujours à partir de 0 de tableau.longueur-1.

Pour imprimer le nombre d'éléments au lieu de l'index, utilisez index+1. Comme ceci:
```
<li v-for="(catalog, index) in catalogs">this index : {{index + 1}}</li>
```
Et de montrer le nombre total utilisation array.lengthComme ceci:
```
<p>Total Count: {{ catalogs.length }}</p>
```
Comme par DOC:

v-pour prend également en charge une option de deuxième argument (pas la première) pour
l'index de l'élément courant.

Vous devez vous connecter pour publier un commentaire.