When I try to increment or decrement the counter, my input shows a different value than what is in this.count
. For example, when I increment the value, the input shows '3' but this.count === 2
.
Vue.component('product-item', {
data: function () {
return {
count: 1 <==I want to increase/decrease this value
}
},
methods: {
add(by) {
let res = parseInt(this.count) + parseInt(by);
this.count = res; <== this is where I do it
}
}
template:
`<button type="button" class="countpicker-dec" @click="add(-1)" :disabled="count < 2">-</button>
<input type="number" class="countpicker-num" v-model.number="count"> <==I expect to see this.count here
<button type="button" class="countpicker-inc" @click="add(+1)">+</button>`