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](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) — str, Mar 20 '20 at 15:59

Shivam Singh · Answer 1 · 2020-03-25T05:54:58.073

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 '20 at 05:54

answered Mar 20 '20 at 15:48

Shivam Singh

1,671
1
11
25

Is it possible for you to make me a codepen , because I have so much difficulty to follow you , sorry – TheDevGuy Mar 20 '20 at 16:03
@TheDevGuy np, sure here goes the pen: https://codesandbox.io/s/affectionate-chatelet-q2113 – Shivam Singh Mar 20 '20 at 16:12
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 ? – TheDevGuy Mar 20 '20 at 16:27
Do you want to call the method when the prop is updated? Or when do you want the method to be called? – Shivam Singh Mar 20 '20 at 16:59
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 – Shivam Singh Mar 20 '20 at 17:01
@TheDevGuy also you can simply acess the prop value by `this.myData` in the fn as it's the value that you are passing as prop to the child. – Shivam Singh Mar 21 '20 at 06:14
But, if you can let me know when do you want to invoke the fn will help me to help you better. – Shivam Singh Mar 21 '20 at 06:15
I update my code to show you what I tells you above – TheDevGuy Mar 25 '20 at 01:10

score 2 · Answer 2 · answered Mar 20 '20 at 16:08

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>

It at all, you like to not use `sync and update` then use `` and of course remove `update` while emitting `this.$emit('val', event.target.value)` — Syed, Mar 25 '20 at 03:05

Avoid props mutation in vueJS

2 Answers2

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

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