I have a Vue component like bellow:
<div v-for="item in items" :key="there I want get the for-loop index" >
</div>
...
data(){
items: [{name:'a'}, {name:'b'}...]
}
How can I get the index when I execute the for-loop in my vue.js?
-
3Bear in mind that using the loop index isn't really any better than just omitting the key entirely. The ideal choice of key is something that uniquely identifies each item in the array/object.Tom Fenech– Tom Fenech2018-04-05 16:44:31 +00:00Commented Apr 5, 2018 at 16:44
Add a comment
|
6 Answers
Declare an index variable:
<div v-for="(item, index) in items" :key="item.name">
</div>
Demo:
new Vue({
el: '#app',
data: {
items: [{name: 'a'}, {name: 'b'}]
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="item.name">
{{ index }}: {{ item.name }}
</div>
</div>Official docs section - Mapping an Array to Elements with v-for (emphasis mine):
Inside
v-forblocks we have full access to parent scope properties.v-foralso supports an optional second argument for the index of the current item.
5 Comments
Adam Zerner
Tom Fenech's comment is very true and important.
:key="index" doesn't really help much. Check out rimdev.io/the-v-for-key for an explanation as to why.
acdcjunior
@AdamZerner Good tip. Prepending is really at odds with index as key. I will update the example
Kick Buttowski
@acdcjunior could you please explain this part? "Inside v-for blocks we have full access to parent scope properties" what are the parent scope properties here? thank you for your time.
acdcjunior
@KickButtowski in the example, the parent is the whole app, which only has
items. If it had any other property, such properties would be available. Another example is if there is a v-for inside another v-for. In this case, the inner v-for has access to the variables declared in the outer v-for, its parent scope.
hinst
In Vue1 v-for the order of the values is different. It is (index, item) instead of (item, index)
Use
v-for="(value,name,index) in Object"
for Objects
v-for="(value,index) in Array"
for Arrays
1 Comment
robertdavid
Great answer for simplicity and clarity on a feature that might be hard to dig out of the docs.
Create a new method:
methods: {
incrementIndex(key) {
return key + 1;
},
},
If the array keys are numbered, starting with zero like items[0], items[1], etc.., you can use the array's keys:
<div v-for="(item, key) in items" :key="key">
{{ incrementIndex(key) }}
</div>
But if the array's keys are typeof String then you can do:
<div v-for="(item, key, index) in items" :key="key">
{{ incrementIndex(index) }}
</div>
The second version uses the counter from the v-for loop.
Comments
You can use `$index` to get the index of v-for.
<div v-for="item in items" :key="`$index`" >
</div>
and the other method:
<div v-for="(item, index) in items" :key="index" >
</div>
Updated Answer::
You have indexed array as: "["aaaa","bbbbb"]" then you this script.
new Vue({
el: '#app',
data: {
items: ["aaaa","bbbbb"]
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
{{ index }} : {{ item }}
</div>
</div>
Comments
<div v-for="(item, index ) in arrayData" :key="index">
<p>{{index+1}}</p>
</div>
1 Comment
Jeremy Caney
Thank you for your interest in contributing to the Stack Overflow community. This question already has several answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation?