VUE JS: Onclick не увеличил оценку должным образом
Привет, я работаю над простой игрой, в которой, если пользователь нажимает кнопку, счет будет плюс, то есть 1.
new Vue({
el: '#MyApp',
data: {
score: '10',
},
methods: {
ScoreIncre: function(incre) {
this.score += incre;
}
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "MyApp">
<p>My Score is {{score}</p>
<button v-on:click = "ScoreIncre(1)">Increase my Score</button>
</div>После того, как кнопка нажата, вместо добавления очков +1 отображается результат «Моя оценка 101». Какова возможная причина этого? Я попытался разобрать инкремент на int, но результат был таким же.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Поскольку оценка равна «10», поэтому это строка, а не число, поэтому, когда вы увеличиваете «10» + 1, это «101», а не 11, вы должны изменить «10» на 10.
Спасибо большое, дружище, все работает :)
'10' - строка. Тебе нужно
data: {
score: 10,
}
Спасибо большое, дружище, все работает :)
'10' в вашем коде - это строка, а не число. Вот почему вы не можете увеличить его. Объявите это числом или без кавычек, например: 10
Спасибо большое, дружище, все работает :)
Вам нужно сохранить 10 как число, а не String, кроме того, в вашем шаблоне отсутствует фигурная скобка на конце }.
Проверить фрагмент:
new Vue({
el: '#MyApp',
data: {
score: 10,
},
methods: {
ScoreIncre: function(incre) {
this.score += incre;
}
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "MyApp">
<p>My Score is {{score}}</p>
<button v-on:click = "ScoreIncre(1)">Increase my Score</button>
</div>Спасибо большое, дружище, все работает :)
'10'- строка.