VueJS v-for loop breaking when array values are equal to each other

Question

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.

Gus · Accepted Answer · 2017-02-17 17:53:18Z

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.org/guide/list.html#track-by-index

answered Feb 17, 2017 at 17:53

Gus

4,5272 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AldoRomo88 · Accepted Answer · 2017-02-17 17:49:35Z

1

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

answered Feb 17, 2017 at 17:49

AldoRomo88

2,0761 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

VueJS v-for loop breaking when array values are equal to each other

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related