Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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:

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


How can I get count from index, i.e. output like this:
 this index: 1
 this index: 2
 this count: 2 field

                Simple remark: I would simply use the $index, seems cleaner. <li v-for="item in catalogs">this index : {{$index}}</li>
– Cohars
                Mar 7, 2016 at 10:27
                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.
– Manno
                Feb 21, 2017 at 11:59
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 }}
                Has the spec changed? It appears that is now (catalog, itemObjKey)... we should probably update this.
– Jonah
                May 22, 2018 at 22:56
                @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!
– Robert Dundon
                Sep 24, 2018 at 20:30
                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.
– Anton
                Mar 4, 2022 at 22:05
Alternatively, you can just use,
<li v-for="catalog, key in catalogs">this is index {{++key}}</li>
This is working just fine.
                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.
– Jason Ellis
                Aug 15, 2019 at 20:35
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}}
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>
For more info on Vue list rendering: https://v2.vuejs.org/v2/guide/list.html
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}}
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}}
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}}
Hope that helps.
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.