Sometimes, we want to get the index of the item being rendered with v-for in Vue.js.
In this article, we’ll look at how to get the index of the item being rendered with v-for in Vue.js.
Get the Index of the Item Being Rendered with v-for in Vue.js
We can get the index of the item being rendered with v-for in Vue.js from the 2nd item in the parentheses in v-for .
For instance, we can write:
<template>
<div id="app">
<div v-for="(item, index) in items" :key="item.name">
{{ index }}: {{ item.name }}
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [{ name: "a" }, { name: "b" }],
};
},
};
</script>
to get the item index from the index variable.
Conclusion
We can get the index of the item being rendered with v-for in Vue.js from the 2nd item in the parentheses in v-for .
