how can get index count in vuejs

Question

I have code like this  JSFiddle      lt li v-for   itemObjKey  catalog  in catalogs  gt this index     itemObjKey   lt  li gt    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

User · Answer

Alternatively  you can just use    lt li v-for  catalog  key in catalogs  gt this is index     key   lt  li gt    This is working just fine

User · Answer

this might be a dirty code but i think it can suffice   lt div v-for   counter in counters  gt     counter        userlist counter-1  name     lt  div gt    on your script add this one  data   return  userlist     user id     counters  0 edit  false

User · Answer

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    lt li v-for   catalog  index  in catalogs  gt this index     index   1   lt  li gt    And to show the total count use array length  Like this    lt p gt Total Count     catalogs length    lt  p gt    As per DOC      v-for also supports an optional second argument  not first  for   the index of the current item

User · Answer

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    lt ul gt     lt li v-for   item  key  index  in items  gt         item    -    key    -    index       lt  li gt   lt  ul gt    Source  https   alligator io vuejs iterating-v-for

User · Answer

you can just add 1   lt li v-for   catalog  itemObjKey  in catalogs  gt this index     itemObjKey   1   lt  li gt    to get the length of an array objects     catalogs length

User · Answer

The optional SECOND argument is the index  starting at 0  So to output the index and total length of an array called  some list     lt div gt Total Length    some list length   lt  div gt   lt div v-for   each  i  in some list  gt      i   1       each    lt  div gt    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     lt div id  an id  gt     lt span v-for   each  i  in my object  gt        i       each   lt br  gt     lt  span gt   lt  div gt    For more info on Vue list rendering  https   vuejs org v2 guide list html

User · Answer

Using Vue 1 x  use the special variable  index like so    lt li v-for  catalog in catalogs  gt this index      index   1   lt  li gt    alternatively  you can specify an alias as a first argument for v-for directive like so    lt li v-for   itemObjKey  catalog  in catalogs  gt      this index     itemObjKey   1    lt  li gt    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    lt li v-for   catalog  itemObjKey  in catalogs  gt      this index     itemObjKey   1    lt  li gt    See  Vue 2 x guide  Eliminating the parentheses in the v-for syntax also works fine hence    lt li v-for  catalog  itemObjKey in catalogs  gt      this index     itemObjKey   1    lt  li gt    Hope that helps

[vue.js] how can get index & count in vuejs

Examples related to vue.js