59

I have code like this (JSFiddle)

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

Output:
this index: 0
this index: 1

My question is:

  1. How can I get value index first begin: 1 for example
    I want output like this:
    this index: 1
    this index: 2

  2. How can I get count from index, i.e. output like this:
    this index: 1
    this index: 2
    this count: 2 field
2
  • Simple remark: I would simply use the $index, seems cleaner. <li v-for="item in catalogs">this index : {{$index}}</li> Commented Mar 7, 2016 at 10:27
  • 4
    For anyone else looking at this question, the above comment would only apply to Vue 1. Vue 2 has dropped the $index syntax in favour of explicitly declaring the index. Commented Feb 21, 2017 at 11:59

7 Answers 7

82

you can just add 1

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

to get the length of an array/objects

{{ catalogs.length }}
Sign up to request clarification or add additional context in comments.

3 Comments

Has the spec changed? It appears that is now (catalog, itemObjKey)... we should probably update this.
@Jonah It has: vuejs.org/v2/guide/list.html#v-for-with-an-Object Was wondering why my "index/key" was an Object and "value" was a number!
This works for a v-for over an array, not an object. For an object, use v-for="(item, key, index) in object". See answer by nsv.
47

In case, your data is in the following structure, you get string as an index

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

In this case, you can use extra variable to get the index in number:

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

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

3 Comments

This answer should be way closer to the top!
This is what I was looking for. This should be the acceptable answer. Thanks!
This seems right, but it doesn't work on mine
20

Alternatively, you can just use,

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

This is working just fine.

2 Comments

(catalog, key) must be wrapped in parentheses though
I would recommend using index instead of key because the key isn't always a number. @deathemperor it doesn't have to be wrapped to work.
9

The optional SECOND argument is the index, starting at 0. So to output the index and total length of an array called 'some_list':

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

If instead of a list, you were looping through an object, then the second argument is key of the key/value pair. So for the object 'my_object':

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

The following would print out the key : value pairs. (you can name 'each' and 'i' whatever you want)

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

For more info on Vue list rendering: https://v2.vuejs.org/v2/guide/list.html

Comments

2

Using Vue 1.x, use the special variable $index like so:

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

alternatively, you can specify an alias as a first argument for v-for directive like so:

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

See : Vue 1.x guide

Using Vue 2.x, v-for provides a second optional argument referencing the index of the current item, you can add 1 to it in your mustache template as seen before:

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

See: Vue 2.x guide

Eliminating the parentheses in the v-for syntax also works fine hence:

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

Hope that helps.

Comments

1

Why its printing 0,1,2...?

Because those are indexes of the items in array, and index always starts from 0 to array.length-1.

To print the item count instead of index, use index+1. Like this:

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

And to show the total count use array.length, Like this:

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

As per DOC:

v-for also supports an optional second argument (not first) for the index of the current item.

Comments

0

this might be a dirty code but i think it can suffice

<div v-for="(counter in counters">
{{ counter }}) {{ userlist[counter-1].name }}
</div>

on your script add this one

data(){return {userlist: [],user_id: '',counters: 0,edit: false,}},

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.