Question

我正在考虑这个“避免直接改变道具”，当检查人员输入是否应该得到一个无效的类，因为它是空的。

<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

您收到该警告是因为您通过<a href="https://linkedin.com/your/profile/url" class="social-icon si-rounded si-small si-linkedin"> <i class="icon-linkedin"></i> <i class="icon-linkedin"></i> </a>将persons绑定到模板中的输入。因此，更改输入值将更改v-model的值，这意味着道具将直接在persons组件中进行变异。

您应该设置一个等于sr-el的新属性，并将其传递给persons：

v-model

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

Vue2：避免直接在组件内变异道具

1 个答案: