I am quite new in vue and working on a task which is based on vue.js. I am showing my data in a ponent 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

I am quite new in vue and working on a task which is based on vue.js. I am showing my data in a ponent 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

• javascript
• vue.js
• vue-ponent

• Please share the code in codesandbox – Deepu Reghunath Commented Feb 24, 2020 at 8:39

3 Answers 3

First, in terms of vue flow, remember never mutating directly props. You should mutate the data in the parent ponent instead. To do this, the remendation 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 ponent code so i make a generic code below, you can follow:

using sync

in parents ponents

<parent :products.sync=products />

in children ponents 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 remended in your case, the children should only handle the logic of display (dumb ponent). Logic of changing data should be moved to parents (like a controller). If that is the case. you can create a method in parents ponent and add the increment logic:

parents ponents

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



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

children ponents

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

You can assign props value to a variable. Then use it child ponent.

export default {
    props: {
      products: Array,
    },
    data(){
     return {
       newProducts: this.products,
     }
   }
}

You should change props structure in child ponent. use newProducts in child ponent and if you update parent props data you should use emit for child to parent munication.

For further parent child munication you can follow this tutorial: https://www.bdtunnel./2018/02/vue-js-ponent-munication-plete.html

First of all, you should never mutate props in the child ponent. You should use event munication pattern for child and parent munication. While changing a particular value inside an array in particular index in an array or updating a property in an object the view does not react to these changes due to Object and Array Caveats in Vue. You can read it here

https://v2.vuejs/v2/guide/reactivity.html

You can use $set to make the template react to changes in Object and Array. Here is my sandbox URL which answers your question