Check out my pen here: http://codepen.io/leetzorr/pen/aprZqO
This is the HTML code:
<template v-for="spot in bars" :key="item.$index">
<div id="bar-holder">
<div class="bars">
<ul>
<span>{{ $index }}</span>
<li v-for="n in bars[$index]"></li>
</ul>
<button v-on:click="increase($index)">+</button>
</div>
</div>
</template>
And this is the JavaScript code:
var par = {
bars : [ 1, 5, 6 ]
}
var cl = new Vue({
el: '#container',
data: par,
methods: {
increase: function (index) {
var value = this.bars[index];
value++;
par.bars.$set(index, value);
},
}
})
Clicking the increase button under each group of bars will increment the value in the par.bars array. However, there seems to be a bug where one of the bar elements disappears when the value matches that of another sibling element.
I've spent hours reviewing my code but can't seem to pinpoint where the issue lies.