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

Please share the code in codesandbox

Deepu Reghunath
– Deepu Reghunath

2020-02-24 08:39:41 +00:00
Commented Feb 24, 2020 at 8:39 — Deepu Reghunath
– Deepu Reghunath, Commented Feb 24, 2020 at 8:39

Jake Lam · Accepted Answer · 2020-02-24 09:28:10Z

6

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

answered Feb 24, 2020 at 9:28

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

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

2 Comments

rodrigocfd Over a year ago

"Remember never mutating directly props"... but we can make mistakes and modify them without intention. The fact that Vue (even in v3) allows mutation of prop (the fields under them) is a huge footgun. I hate to say this, but this doesn't happen in React, because the props are truly readonly.

tcpiper Over a year ago

As you write let item = this.productListInChildren[index], why not just item.product_quantity += 1?

Sukanta Bala · Accepted Answer · 2020-02-24 09:28:12Z

3

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

answered Feb 24, 2020 at 9:28

Sukanta Bala

8791 gold badge9 silver badges19 bronze badges

1 Comment

Harris Khan Over a year ago

I have another question I want to add another value in newProducts array and show in component i.e current_quantity by subtracting two quantities i.e stock_in and quantity that are available in products.

tony19 · Accepted Answer · 2022-07-15 05:20:54Z

0

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

edited Jul 15, 2022 at 5:20

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 24, 2020 at 9:05

Srinivasu Kotla

1043 bronze badges

Collectives™ on Stack Overflow

how to change props value using method - Vue.js

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related