如何将独立增量计数器添加到数组中的新项目。 Vue.js

Question

在我的示例中，我有两个数组。 第一个数组 - 值，第二个 - 增量计数器的零。 任何新项目都有他自己的计数器按钮。 但它不起作用，我不知道为什么。如果我按下几个按钮，我会在数组中看到混乱的行为

JSfiddle

1. 如何修复？

2. 没有按钮怎么做计数器功能？

   示例：如果我加载页面，我会看到 3 个元素。计数器从 0 开始计数。10 秒后，我添加新元素。旧计数器继续工作，但新元素中的计数器从 0 开始。

new Vue({
	el: '#page',
  data: {
  	arr: [1, 2 ,3],
    count: [0, 0 ,0]
  },
  methods: {
  	addEll: function() {
    	this.arr.push(this.arr.length + 1);
      this.count.push(0);
    },
    incrementio: function(val) {
        interval = setInterval(() => {
        Vue.set(this.count, this.count[val], 0);
        this.count[val]++;
      }, 1000);
     },
  },
  computed: {
  	visibleList: function(){
    	return this.arr;
    }
  }
  
})

<script src="https://unpkg.com/vue"></script>

<div id="page">
<button v-on:click="addEll">Add element</button>
{{ arr }}
{{ count }}
  <ul>
    <li v-for="(item, index) in visibleList">
        {{item}}
        <button v-on:click="incrementio(index)">Counter: {{count[index]}}</button>
    </li>
  </ul>
</div>

Answer 1

我不清楚你的柜台应该做什么，但我认为它需要改变这些行

Vue.set(this.count, this.count[val], 0);
this.count[val]++;

到这 1 行：

Vue.set(this.count, val, this.count[val]+1);

我认为您需要将setInterval 更改为setTimeout。

这里更新jsfiddle。

Answer 2

正如您在 Vuejs 文档中看到的那样 Vuejs Caveats

Vue 无法检测到数组的以下更改：

• 当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue
• 当您修改数组的长度时，例如vm.items.length = newLength

要克服警告 1，以下两项将完成与 vm.items[indexOfItem] = newValue 相同的操作，但也会触发反应系统中的状态更新：

Vue.set(vm.items, indexOfItem, newValue)

示例如下：

new Vue({
  el: '#page',
  data: {
    arr: [1, 2 ,3],
    count: [0, 0 ,0]
  },
  methods: {
    addEll: function() {
       this.arr.push(this.arr.length + 1);
       this.count.push(0);
    },
    incrementio: function(index) {
       this.$set(this.count, index, this.count[index] + 1)
    },
  },
  computed: {
     visibleList: function(){
       return this.arr;
     }
  }
})

Answer 3

如果我理解正确，您会尝试计算每个值的生命周期。这是我的方法。首先，我将值和它的计数器绑定在一个对象中，因为我发现它更有效。继续，我定义了interval 属性，因为不这样做（编译器在全局范围内自动定义它）可能会导致不需要的行为，并且在strict 模式下被视为错误。我还从您的代码中删除了不必要的 visibleList 计算属性。最后但同样重要的是，我在beforeDestroy 钩子中添加了clearInterval 函数，因为这是一个好习惯。 （在您的特定情况下，可能没有必要这样做，但如果它是一个重复使用多次的组件，那么拥有它非常重要，因为它可以释放内存。）

new Vue({
  el: '#page',
  data: {
    arr: [{
      value: 1,
      counter: 0
    }],
    interval: null
  },
  mounted () {
    this.interval = setInterval(() => {
      this.arr.map(x => x.counter++);
    }, 1000);
  },
  beforeDestroy () {
    clearInterval(this.interval);
  },
  methods: {
    addEll () {
      this.arr.push({
        value: this.arr.length + 1,
        counter: 0
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="page">
  <button v-on:click="addEll">Add</button> {{ arr }}
  <ul>
    <li v-for="(item, index) in arr">
      {{item.value}} Counter: {{item.counter}}
    </li>
  </ul>
</div>