Vue增量值不一致使用v-model

Question

我想增加/減少計數器。 總是好的，但是我的輸入在this.count中顯示了不同的值。 例如，我在哪里增加價值。 輸入顯示 '3' 但this.count === 2 。

Vue.component('product-item', {
data: function () {
    return {
        count: 1  <==want inc/dec this value
    }
},
methods: {
   add(by) {
        let res = parseInt(this.count) + parseInt(by);
        this.count = res;    <== here 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"> <==there I wanna see this.count

<button type="button" class="countpicker-inc" @click="add(+1)">+</button>`

Answer 1

您的代碼應該可以正常工作，如下所示：

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', data: function() { return { count: 1 } }, methods: { add(by) { let res = parseInt(this.count) + parseInt(by); this.count = res; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app" class="container"> <button type="button" class="countpicker-dec" @click="add(-1)":disabled="count < 2">-</button> <input type="number" class="countpicker-num" v-model.number="count"> <button type="button" class="countpicker-inc" @click="add(+1)">+</button> <div>{{count}}</div> </div>

Answer 2

 add() {
   this.count += 1;
}

如果只是增加1..為什么通過參數只是增加方法

Answer 3

要顯示this.count的含義，請使用

<p>{{this.count}}</p>

顯示您輸入的值

<input type="number" class="countpicker-num" v-model.number="count">