how to change props value using method - Vue.js

Question

I am quite new in vue and working on a task which is based on vue.js. I am showing my data in a component using a prop. Now I want to add a method to increment the quantity of a product.

here is my code:

<div v-for="(products, index) in products">
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_barcode }}
  </mdc-layout-cell>
<mdc-layout-cell span="2" align="middle">
  {{ products.product_quantity}}
</mdc-layout-cell>
<i class="mdc-icon-toggle material-icons float-left"
   aria-pressed="false"
   v-on:click="incrementItem(index)">
  add
</div>

here is my JS:

export default {
    props: [
      'products',
    ],
    methods: {

      incrementItem(index) {
        let item = this.products[index];
        this.products[index].product_quantity =
          this.products[index].product_quantity + 1;
          console.log(this.products[index].product_quantity);
      },
    }

I can see the incremented value in the console, but the value is not increasing in the respective row. How could I increment the value of product_quantity? Any help would be highly appreciable

Answer 1

First, in terms of vue flow, remember never mutating directly props. You should mutate the data in the parent component instead. To do this, the recommendation is to create a copy of props in children data so when click at the button, the children data change -> the parents data change, which makes the children props also change. There are many ways to do this. I dont have you parents component code so i make a generic code below, you can follow:

using sync

in parents components

<parent :products.sync=products />

in children components methods:

data() {
  return {
    productListInChildren: this.products; // pass props to children inner data
  }
},
methods: {
    incrementItem(index) {
       //do modification in productListInChildren
       let item = this.productListInChildren[index];
        this.productListInChildren[index].product_quantity =
          this.productListInChildren[index].product_quantity + 1;
        // update it back to parents
        this.$emit('update:products', this.productListInChildren)
  }
}

<div v-for="(products, index) in productListInChildren"> // use productListInChildren instead
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_barcode }}
  </mdc-layout-cell>
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_quantity}}
  </mdc-layout-cell>
  <i class="mdc-icon-toggle material-icons float-left"
     aria-pressed="false"
     v-on:click="incrementItem(index)">
    add </i>
</div>

Second: in terms of code design, it is recommended in your case, the children should only handle the logic of display (dumb component). Logic of changing data should be moved to parents (like a controller). If that is the case. you can create a method in parents component and add the increment logic:

parents components

<parent :products=products @increment="incrementInParent"/>



methods: {
incrementInParent() {// move the logic here}
}

children components

methods: {
    incrementItem(index) {
       // call the methods in parents
       this.$emit("increment");
  }
}