come si può ottenere l'indice & contare vuejs

Question

ho code like this (JSFiddle)

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

uscita:
questo indice: 0
questo indice: 1

La mia domanda è:

1. Come posso ottenere l'indice del valore prima di iniziare: 1, per esempio
   voglio output come questo:
   questo indice: 1
   questo indice: 2
   
   
2. Come posso contare dall'indice, ossia l'uscita in questo modo:
   questo indice: 1
   questo indice: 2
   questo conteggio: 2 campo
   

Answer 1

si può semplicemente aggiungere 1

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

per ottenere la lunghezza di un array/oggetti

{{ catalogs.length }} 

Answer 2

In alternativa, si può semplicemente utilizzare,

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

Questo sta lavorando bene.

Answer 3

Il secondo argomento opzionale è l'indice, a partire da 0. Quindi, per l'uscita l'indice e la lunghezza totale di un array chiamato 'some_list':

<div>Total Length: {{some_list.length}}</div> 
<div v-for="(each, i) in some_list"> 
    {{i + 1}} : {{each}} 
</div> 

Se invece di una lista, si erano scorrendo un oggetto, quindi il secondo argomento è la chiave della coppia chiave/valore. Quindi per l'oggetto "my_object":

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

Quanto segue dovrebbe stampare la chiave: coppie di valori. (È possibile denominare 'ogni' e 'i' quello che vuoi)

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

Per maggiori informazioni su lista Vue resa: https://vuejs.org/v2/guide/list.html

Answer 4

Utilizzando Vue 1.x, utilizzare la variabile speciale $index in questo modo:

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

in alternativa, è possibile specificare un alias come primo argomento per v-for direttiva in questo modo:

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

See: Vue 1.x guide

Utilizzando Vue 2.x, v-for fornisce un secondo argomento opzionale riferimento l'indice della voce corrente, è possibile aggiungere 1 ad esso nel modello baffi come visto in precedenza:

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

See: Vue 2.x guide

Eliminando le parentesi in la sintassi v-for funziona bene anche da qui:

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

Speranza che aiuta.

Answer 5

Perché la stampa di 0,1,2 ...?

Perché questi sono indici degli elementi nell'array e l'indice parte sempre da 0 a array.length-1.

Per stampare il numero di articoli anziché l'indice, utilizzare index+1. Come questo:

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

E per mostrare l'uso conteggio totale array.length, in questo modo:

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

Come per DOC:

v-for supporta anche un secondo facoltativa argomento (non prima) per l'indice dell'articolo corrente.