How to change input value for individual object in an array using v-for in Vue?

Question

I'm making a shopping cart. I want to show the price of each product based on their quantity. I made the buttons to add or subtract the quantity of products. However the quantity changes in all products because they all share the same data. How can I do to change quantity for the specific product?

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

Endriyas · Accepted Answer · 2021-05-17 07:24:09Z

1

You have to do is, build an object for all products having quantity field, just like this

<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>

answered May 17, 2021 at 7:24

Endriyas

6067 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

William Chou Over a year ago

Thanks, it helps. Also thank you for adding the if statement for the subtract method

Collectives™ on Stack Overflow

How to change input value for individual object in an array using v-for in Vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related