Вот фиктивный проект: простое приложение счетчика с функцией увеличения и уменьшения, которое изменяет 2 различных значения («жизнь» и «счет») и сохраняет историю c изменений.
«жизнь» изменение значения, как и ожидалось, при использовании обеих функций. Однако «count» ведет себя иначе: значение увеличивается на 2 независимо от используемой функции.
Пример в реальном времени: https://codepen.io/Olivier_Tvx/pen/JjdyBMO?editors=1111
Что здесь не так?
JS
let player = {
data: function () {
return {
life: '20',
poison: '0',
timer: '1500',
count: '0',
historics: [{
value: '',
}],
}
},
methods: {
increaseLife: function() {
clearTimeout(this.timer);
clearTimeout(this.count);
this.life++;
this.count++;
this.timer = setTimeout(() => { this.pushToHistorics() }, 1500);
this.count = setTimeout(() => { this.countClear() }, 1000)
},
decreaseLife: function() {
clearTimeout(this.timer);
clearTimeout(this.count);
this.count--;
this.life--;
this.timer = setTimeout(() => {this.pushToHistorics() }, 1500);
this.count = setTimeout(() => { this.countClear() }, 1000)
},
countClear: function() {
this.count = 0;
},
reset: function() {
this.life = 20;
this.poison = 0;
this.historics = [];
this.count = 0;
},
pushToHistorics: function() {
this.historics.push({
value: this.life,
})
},
},
template: `
<div class="global">
<div class="count"><span v-show="count > 0">counter : {{ count }}</span></div>
<div>PV : {{ life }} </div>
<span>Poison : {{ poison }} </span>
<div class="containterBtn">
<button @click="increaseLife(); increaseCount()">+</button>
<button @click="decreaseLife()">-</button>
<button @click="reset()">reset</button>
</div>
<div class="historics" v-for="historic in historics.slice(0, 10)">
<div class="historic">{{ historic.value }}</div>
</div>
</div>
`
};
let vm = new Vue({
el: '#app',
components: {player},
});