Как добавить независимый счетчик приращений к новому элементу в массиве. 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

Как вы можете видеть в документации Vuejs Предостережения Vuejs

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 2

Если я правильно понимаю, вы пытаетесь посчитать время жизни каждого значения. Вот мой подход. Сначала я связал значение и его счетчик в одном объекте, так как считаю его более эффективным. Продолжая, я определил свойство 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 3

Я не совсем понял из вопроса, что должен делать ваш счетчик, но я думаю, что нужно изменить эти строки

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

к этой 1 строке:

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

И я думаю, вам нужно изменить setInterval на setTimeout.

Здесь обновляется jsfiddle .