Hello. In the code below there are two arrays - one with values, the other is used for the counter. I can not understand why the counters work incorrectly (it is necessary that they work independently on each button). + Interested in how to make the counter run automatically, without pressing a button. Those downloaded the page, there are 3 items. And immediately counters began to count. If you add a new one, then the countdown will start from scratch. Link to Fidl

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>

  • one
    Ask smaller questions, with one problem in question, it will be easier to solve. And as a matter of fact, first try to make a counter component ( for example, a basic example in the documentation ) and make several independent counters and write down what does not work for your task. - MrFylypenko

1 answer 1

JSfiddle Solution

 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>