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

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

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

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

For further parent child communication you can follow this tutorial: https://www.bdtunnel.com/2018/02/vue-js-component-communication-complete.html

Answer 2

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");
  }
}

Answer 3

First of all, you should never mutate props in the child component. You should use event communication pattern for child and parent communication. 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.org/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