Vue.js - как сделать функции, добавленные с новым элементом, независимыми друг от друга

175

08 августа 2018, 07:20

Всем привет. В коде ниже есть два массива - один со значениями, другой используется для счетчика. Не могу понять, почему некорректно работают счетчики (надо, чтобы на каждую кнопку они работали независимо). + Интересует, как сделать так, чтобы счетчик запускался автоматом, без нажатия кнопки. Те загрузили страницу, есть 3 элемента. И сразу счетчики стали считать. Если добавить новый, то в нем отсчет начнется с нуля Ссылка на фидл

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">Добавить элемент</button> 
{{ arr }} 
{{ count }} 
  <ul> 
    <li v-for="(item, index) in visibleList"> 
        {{item}} 
        <button v-on:click="incrementio(index)">Счетчик: {{count[index]}}</button> 
    </li> 
  </ul> 
</div>

Answer 1

Решение на JSfiddle

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>