javascript - Vue2 : Avoid mutating a prop directly inside component

Question

在检查人员输入是否应该因为其空而获得无效类时，我得到了这个“避免直接改变 Prop ”。

<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

    }
  }
})

Answer 1

您收到该警告是因为您通过 v-model 将 persons 绑定(bind)到模板中的输入。因此，更改输入的值将更改 persons 的值，这意味着该 prop 会直接在您的 sr-el 组件中发生变化。

您应该设置一个等于 persons 的新属性，并将其传递给 v-model:

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

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