Question

我的笔：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);
    },
  }
})

因此，每当您单击每组条形下的增加按钮时，par.bars数组中的该值都会增加。出于某种原因，每当par.bar [index]的值等于其中一个兄弟的值时，其中一个条形元素就会消失。

我现在已经检查了我的代码大约一个小时，并且无法弄清楚这是在哪里破坏。

Answer 1

替换

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

使用：

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

Vue.js指南中的说明：http://v1.vuejs.org/guide/list.html#track-by-index

Answer 2

这是因为Vue重用具有相同密钥的模板。

为了避免你可以使用索引作为键（显然你是在第一时间尝试做的！）

将模板的指令v-for更改为此类

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

请参阅此工作fiddle

当数组值彼此相等时，VueJS v-for循环中断

2 个答案: