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

Question

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

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

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

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>

Answer 2

我不明白你的反击应该做什么，但我认为它需要改变这些界限

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

到这一行：

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

而且我认为你需要将setInterval改为setTimeout。

这是更新的jsfiddle。

Answer 3

正如您在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;
     }
  }
})