Accessing the index in a v-for loop in VueJS
Getting the index of a for loop in VueJs - http://coligo.io
by WILLIAM CORREA
HTML
<div id="vue-instance">
<ul>
<li v-for="item in inventory">
{{ item.name }} - ${{ item.price }}
</li>
</ul>
<div>total={{counter}}</div>
<button @click="load">load</button>
</div>
JavaScript
var vm = new Vue({
el: '#vue-instance',
data: {
all: [
{name: 'MacBook Air', price: 1000},
{name: 'MacBook Pro', price: 1800},
{name: 'Lenovo W530', price: 1400},
{name: 'Acer Aspire One', price: 300}
],
inventory: [],
counter: 0
},
methods: {
load () {
this.all.forEach(__item => {
this.inventory.push(__item);
this.counter++;
});
}
}
});