嗨,目前我正在做一个加减函数,我面临的问题是,一旦我点击了加减,值仍然保持不变...我也使用了手表属性,它仍然不工作
get_list正在从API调用
<b-row v-for="(data,i) in get_list" :key="i" class="mt-3 mx-0">>
<b-button pill
class="quantity-btn btn-secondary"
@click="addQuantity(data.id_product,data.id_style)"
>
<span style="transform: translateY(-5%);">+</span>
</b-button>
<div class="px-2">
<b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity" v-model="data.cart_quantity" class="quantity-input"></b-form-input>
</div>
<b-button pill
class="quantity-btn btn-secondary"
@click="minusQuantity(data.id_product,data.id_style)"
>
<span style="transform: translateY(-5%);">-</span>
</b-button>
</b-row>
脚本
data: () => ({
get_list: [],
quantity:0,
}),
method :{
addQuantity(id,style) {
this.quantity++
this.updateQuantity(id,style)
},
minusQuantity(id,style) {
this.quantity--
this.updateQuantity(id,style)
},
},
watch: {
quantity(newVal, oldVal) {
console.log('new'+newVal)
}
}
2条答案
按热度按时间q35jwt9p1#
看看上面证明的代码中的这段代码。
此处似乎在模板中使用了cart_quantity,而不是quantity,因此未更新。
要解决此问题,您可以更新数据对象的cart_quantity属性,而不是addQuantity和minusQuantity中的quantity数据属性
请删除watch属性,因为它似乎不是必需的。
lf5gs5x22#
问题是您正在对
quantity
变量执行add/minus操作,但在模板中,您使用的cart_quantity
变量不是递增/递减的。因此,根据您的逻辑使用
quantity
或cart_quantity
。还有一件事,你不需要同时使用
value
和v-model
,如果你想给予input
一些初始值,只要把这个值赋给你的cart_quantity
就可以了。最后一点,你也不需要一个观察者。