vue.js - 如何在 Vue 中使用 v-for 更改数组中单个对象的输入值？

Question

我正在做一个购物车。我想根据数量显示每种产品的价格。我制作了增加或减少产品数量的按钮。但是，所有产品的数量都会发生变化，因为它们都共享相同的数据。如何更改特定产品的数量？

    <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--;
    },
   }

Answer 1

您要做的是，为所有具有数量字段的产品构建一个对象，就像这样

<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",
          price: 100,
          quantity: 0,
        },
        {
          description: "product 3",
          price: 100,
          quantity: 0,
        },
      ],
    };
  },
  methods: {
    addProduct(index) {
      this.cartProducts[index].quantity++;
    },
    subtractProduct(index) {
      if (this.cartProducts[index].quantity !== 0)
        this.cartProducts[index].quantity--;
    },
  },
};
</script>