my pen:

html

    <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>

javascript

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);
    },
  }
})

So whenever you click the increase button under each group of bars, that value in the par.bars array increases. For some reason, whenever par.bar[index]'s value equals that of one of its siblings, one of the bar elements disappears.

I've went over my code for about an hour now, and cannot figure out where this is breaking.

my pen: http://codepen.io/leetzorr/pen/aprZqO

html

    <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>

javascript

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);
    },
  }
})

So whenever you click the increase button under each group of bars, that value in the par.bars array increases. For some reason, whenever par.bar[index]'s value equals that of one of its siblings, one of the bar elements disappears.

I've went over my code for about an hour now, and cannot figure out where this is breaking.

• javascript
• vue.js

Share Follow asked Feb 17, 2017 at 16:46 justinhurstjustinhurst 1511 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Replace

<template v-for="spot in bars" :key="spot.$index">

with:

<template v-for="spot in bars" :key="spot.$index" track-by="$index">

Explanation in the Vue.js guide: http://v1.vuejs/guide/list.html#track-by-index

This is because Vue reuse templates with same key.

To avoid that you could use index as key (apparently that was you were trying to do in first place!)

Change your template's directive v-for to something like this

<template v-for="spot in bars.length">

Please see this working fiddle