如何解决如何在Vue中使用v-for更改数组中单个对象的输入值?
我正在制作购物车。我想根据数量显示每种产品的价格。 我做了按钮来增加或减少产品的数量。但是,所有产品的数量都会发生变化,因为它们都共享相同的数据。如何更改特定产品的数量?
<div v-for="(cartProduct,index) in cartProducts" :key="index" class="px-3 py-2">
<div id="cartProducts">
<p>{{cartProduct.description}}</p>
<button @click="subtract" >-</button> <p>{{quantity}}</p> <button @click="add">+</button>
<p>$ {{cartProduct.price*quantity}}</p>
</div>
</div>
export default {
data(){
return{
quantity:1
}
},methods:{
add(){
this.quantity++;
},subtract(){
this.quantity--;
},}
解决方法
你要做的是,为所有有数量字段的产品建立一个对象,就像这样
<template>
<div>
<div
v-for="(cartProduct,index) in cartProducts"
:key="index"
class="px-3 py-2"
>
<div id="cartProducts">
<p>{{ cartProduct.description }}</p>
<button @click="subtractProduct(index)">-</button>
<p>{{ cartProduct.quantity }}</p>
<button @click="addProduct(index)">+</button>
<p>$ {{ cartProduct.price * cartProduct.quantity }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cartProducts: [
{
description: "product 1",price: 100,quantity: 0,},{
description: "product 2",{
description: "product 3",],};
},methods: {
addProduct(index) {
this.cartProducts[index].quantity++;
},subtractProduct(index) {
if (this.cartProducts[index].quantity !== 0)
this.cartProducts[index].quantity--;
},};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。