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

Question

Here, I have a variable called total_price which I sent from laravel. I wanna do many things to it. When I use methods, when script runs them, I get the mutating error. Here is the script:

 export default {
    props: {
        .//some other props here are cut for better reading 
        .
        .
        total_price:{
          type:Number
        },
      .
      .
      .
    },
    data(){
        return {
            newValue:7,
            total_price:1,
        }
    },

I use them in methods like this:

    methods:{
        getNotificationClass (notification) {
            return `alert alert-${notification.type}`
        },
        mpminus: function () {
            if ((this.newValue) > this.min) {
                this.newValue = this.newValue - 1
                this.$emit('input', this.newValue)
            }
            if(this.newValue < this.max_occupancy){

                this.total_price =  this.extra_price /  ( this.newValue - this.base_capacity )
                this.person_number =this.newValue - this.base_capacity
                this.$emit('input', this.totalprice)
                this.$emit('input', this.person_number)
            }
        },
        mpplus: function () {
            if (this.max === undefined || (this.newValue < this.max)) {
                this.newValue = this.newValue + 1
                this.$emit('input', this.newValue)
            }
            if(this.newValue > this.base_capacity){
                this.total_price =  this.extra_price * ( this.newValue - this.base_capacity )
                this.person_number =this.newValue - this.base_capacity
                this.$emit('input', this.totalprice)
                this.$emit('input', this.person_number)
            }
        },


    },

...using this template:

  <div class="minusplusnumber">
                        <div class="mpbtn minus"  v-on:click="mpminus()">
                            -
                        </div>
                        <div id="field_container">
                            <input type="number" v-model="newValue" disabled />
                        </div>
                        <div class="mpbtn plus"  v-on:click="mpplus()">
                            +
                        </div>
                    </div>

When I click minus or plus, I get this warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "total_price"

found in

---> <Reserve> at resources/js/components/Reserve.vue
       <Root>

What is the name of the component (the name of the .vue file)? Try removing the total_price:{ type:Number }, from the props part, keep it only on data(). Does it still work? — acdcjunior
The warning is clear enough. Just make a copy of total_price in the created() function and make changes to that copy. — edwin

Matt Oestreich Matt Oestreich · Accepted Answer · 2019-03-29T00:53:53

Here is an example of how to use props along with mutation - this is a good way of summarizing what you are trying to accomplish..

Just change the number in :default-value=X to simulate passing down a prop..

Full Link: https://codepen.io/oze4/pen/PLMEab

HTML:

<!-- Main Vue instance (aka parent) -->
<div id="app">
  <!-- ----------------------------------------- -->
  <!-- CHANGE THE NUMBER 10 TO WHATEVER YOU WANT -->
  <!-- ----------------------------------------- -->
  <my-counter :default-value=10></my-counter>
</div>


<!-- Child component as x-template component -->
<script type="text/x-template" id="counter">
  <div>
    <div style="border: 1px solid black; width: 250px; margin: 40px 40px 40px 40px">
      <v-btn @click="increase" color="blue">Increase</v-btn>
      <v-btn @click="decrease" color="red">Decrease</v-btn>
    </div>
    <div>
      <div>
        <h3 style="margin-left: 40px;">Current Count: {{ currentValue }}</h3>
      </div>
    </div>
  </div>
</script>

JS/Vue

/**
 * Child component as x-template
 */
const appCounter = {
  template: '#counter',
  props: {
    defaultValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentValue: '',
    }
  },
  mounted() {
    this.currentValue = this.defaultValue;
  },
  methods: {
    increase(){
      this.currentValue++;
    },
    decrease(){
      this.currentValue--;
    }
  }
}


/**
 * Main Vue Instance
 */
new Vue({
  el: "#app",
  components: {
    myCounter: appCounter
  }
});

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

1 Answers