Avoid props mutation in vueJS

Question

I have a component with props ans I want to modify the value from false to true but I have a message form chrome console

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

In the parent component I have a function (myFunction) who take one argument( value ).

I need to keep my argument like this, but I also need to retrieve the value of the emit from the child component to change the value of myData without mutate the props in child.

https://codesandbox.io/s/distracted-wiles-w8vwf

<template>
  <div>
    <p>The number is {{number}}</p>
    <Child :MyProp="myData" @on-click-btn="myfonction(5)"/>
  </div>

</template>

<script>
import Child from "./components/Child.vue";

export default {
  data() {
    return {
      myData: 'button',
      number: 1
    };
  },
  components: {
    Child
  },
  methods: {
    myfonction(value) {
      this.number = value;
    }
  }
};
</script>

thanks

Does this answer your question? Vue 2 - Mutating props vue-warn — str
– str, Commented Mar 20, 2020 at 15:59

Christian Carrillo · Accepted Answer · 2020-03-20 16:08:05Z

2

you can use the sync modifier:

Vue.component('child', {
  template: '#child',
  props: {
    val: {
      type: String, required: true
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('update:val', event.target.value)
    }
  }
})

new Vue({
  el: '#app',
  data(){
    return {
      value: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<script type="text/x-template" id="child">
  <input @input="handleInput">
</script>

<div id="app">
  <child :val.sync="value"></child>
  <div>{{ value }}</div>
</div>

answered Mar 20, 2020 at 16:08

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

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

1 Comment

Syed Over a year ago

It at all, you like to not use sync and update then use <child @val="value = $event"></child> and of course remove update while emitting this.$emit('val', event.target.value)

Shivam Singh · Accepted Answer · 2020-03-25 05:54:58Z

2

It's an anti-pattern to modify `prop` directly in Vue

Instead, you can an emit an event from the child & modify the data in the parent which is being passed as the prop to the child as below:

parent.vue

<template>
  <child 
   MyProp="myData"
   @on-click-btn="handleClick" // [2] listen to the event & attach an handler to it
  />
</template>

export default {
 data () {
  return {
   myData: false
  }
 },
 // [3] event handler gets called when event is triggered ie. at user's click
 handleClick (currentValue) {
  // [4] modify the data, that is being passed as prop to the child, so that child recieves the updated data
  this.myData = !currentValue
 }
}

child.vue

<template>
  <button @click="handleClick">click me, I am {{ MyProp }}</button>
</template>

export default {
 props: ['MyProp'],
 method: {
  handleClick () {
   // [1] emit an event on user's click & pass the current prop value to it
   this.$emit('on-click-btn', this.MyProp)
  }
 }
}

demo

edited Mar 25, 2020 at 5:54

answered Mar 20, 2020 at 15:48

Shivam Singh

1,7411 gold badge13 silver badges25 bronze badges

8 Comments

TheDevGuy Over a year ago

Is it possible for you to make me a codepen , because I have so much difficulty to follow you , sorry

Shivam Singh Over a year ago

@TheDevGuy np, sure here goes the pen: codesandbox.io/s/affectionate-chatelet-q2113

TheDevGuy Over a year ago

I have a another problem, I use a method with parameters on parent component who do lots of stuff, So How can get value of the props in function ?

Shivam Singh Over a year ago

Do you want to call the method when the prop is updated? Or when do you want the method to be called?

Shivam Singh Over a year ago

If you want the method to be called when the prop is updated, you can simply call your method inside handleClick fn in the parent & pass updated this.myData (ie. your updated prop value) to the fn

|

Collectives™ on Stack Overflow

Avoid props mutation in vueJS

2 Answers 2

1 Comment

It's an anti-pattern to modify `prop` directly in Vue

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

It's an anti-pattern to modify prop directly in Vue

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

It's an anti-pattern to modify `prop` directly in Vue