web-dev-qa-db-fra.com

comment peut-on obtenir un index et compter dans vuejs

J'ai code comme ça (JSFiddle)

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

Sortie:
cet index: 0
cet index: 1

Ma question est:

  1. Comment puis-je obtenir un index de valeur commence en premier: 1 par exemple
    Je veux Sortie comme ceci:
    cet index: 1
    cet index: 2

  2. Comment puis-je compter avec index, c’est-à-dire comme ceci:
    cet index: 1
    cet index: 2
    ce compte: 2 champs
vue.js
26
b4dQuetions

vous pouvez simplement ajouter 1

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

pour obtenir la longueur d'un tableau/d'objets

{{ catalogs.length }}
49
jay temp

Alternativement, vous pouvez simplement utiliser,

<li v-for="catalog, key in catalogs">this is index {{++key}}</li>

Cela fonctionne très bien.

14
Onyango Oriko

Dans le cas où vos données sont dans la structure suivante, vous obtenez une chaîne sous forme d’index.

items = {
   am:"Amharic",
   ar:"Arabic",
   az:"Azerbaijani",
   ba:"Bashkir",
   be:"Belarusian"
}

Dans ce cas, vous pouvez utiliser une variable supplémentaire pour obtenir le numéro d'index:

<ul>
  <li v-for="(item, key, index) in items">
    {{ item }} - {{ key }} - {{ index }}
  </li>
</ul>

Source: https://alligator.io/vuejs/iterating-v-for/

9
Sarvar Nishonboev

L'argument optionnel SECOND est l'index, commençant à 0. Donc, pour sortir l'index et 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 parcouriez un objet, le second argument est la clé de la paire clé/valeur. Donc pour l'objet 'mon_objet':

var an_id = new Vue({
  el: '#an_id',
  data: {
    my_object: {
        one: 'valueA',
        two: 'valueB'
    }
  }
})

Ce qui suit afficherait les paires clé: valeur. (vous pouvez nommer 'each' et 'i' comme vous voulez) 

<div id="an_id">
  <span v-for="(each, i) in my_object">
    {{i}} : {{each}}<br/>
  </span>
</div>

Pour plus d'informations sur le rendu de la liste Vue: https://vuejs.org/v2/guide/list.html

6
MattC

En utilisant Vue 1.x, utilisez la variable spéciale $index comme ceci:

<li v-for="catalog in catalogs">this index : {{$index + 1}}</li>

vous pouvez également spécifier un alias sous la forme premier argument pour la directive v-for, comme suit:

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

Voir: Guide Vue 1.x

En utilisant Vue 2.x, v-for fournit un argument optionnel de second référençant l'index de l'élément actuel, vous pouvez en ajouter un dans votre modèle de moustache, comme précédemment

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

Voir: Guide de Vue 2.x

L'élimination des parenthèses dans la syntaxe v-for fonctionne également très bien, par conséquent:

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

J'espère que cela pourra aider. 

2
Jason Tumusiime

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

Parce que ce sont des index des éléments du tableau, et index commence toujours de 0 à array.length-1.

Pour imprimer le nombre d'éléments au lieu de l'index, utilisez index+1. Comme ça:

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

Et pour afficher le nombre total, utilisez array.length, comme ceci:

<p>Total Count: {{ catalogs.length }}</p>

Selon DOC:

v-for prend également en charge un argument facultatif second (pas le premier) pour l'index de l'élément en cours.

0
Mayank Shukla