Vue2: Avoid mutating a prop directly inside component

Question

I'm gettig this "Avoid mutating a prop directly", when checking if the persons input should get an invalid class because its empty.

<script type="text/x-template" id="srx">
  <input type="number" name="persons" id="persons" value="" v-model="persons" :class="{invalid: !persons}">

</script>


<div id="app">
  {{stepText}}
  <sr-el :persons="1"></sr-el>

  <button v-if="currentStep > 1" type="button" v-on:click="previous()">prev</button>
  <button v-if="currentStep < 6" type="button" :disabled="currentStepIsValid()" v-on:click="next()">
    next</button>
</div>

Vue.component('sr-el', {
  template: '#srx',
  props: ['persons'],
})


var App = window.App = new Vue({
  el: '#app',
  data: {
    persons: '1'
    currentStep: 1,
  },
  methods: {
    currentStepIsValid: function() {

      if (this.currentStep == 1) {
        this.stepText = "Step 1;
        return !(this.persons > 0);
      }

    },
    previous: function() {
      this.currentStep = this.currentStep - 1;
      // prev slide
    },

    next: function() {
      this.currentStep = this.currentStep + 1;
      // next slide

    }
  }
})

thanksd thanksd · Accepted Answer · 2017-06-09T14:02:25

You're getting that warning because you are binding persons to the input in the template via v-model. Changing the input's value will thus change the value of persons, which means the prop is getting mutated directly in your sr-el component.

You should set a new property equal to persons and pass that to v-model instead:

Vue.component('sr-el', {
  template: '#srx',
  props: ['persons'],
  data: function() {
    return {
      inputVal: this.persons,
    }
  }
})

<input v-model="inputVal" ... />

Vue2: Avoid mutating a prop directly inside component

1 Answers