Question

我有一个输入字段，可在其中验证输入字段是否为空。如果为空，则使用类绑定将红色边框应用于输入。

此后，当用户在得到错误后专注于输入时，该错误应消失。但是，它没有按预期工作。它实际上并不能消除错误。

new Vue ({
el: '#app',
  data: {
      register: {
        firstName: '',
      },
      errors: {
        firstName: '',
      },
  },
  methods: {
    validateLoginForm() {
      const regsrt = this.register;

      this.errors = {};

      if(!regsrt.firstName) {
        this.errors.firstName = 'First Name is required';
      } else {
        this.errors.firstName = '';
      }
    },
    deleteErrors(errorName) {
      this.errors[errorName] = '';
    }
  }
});

<div id = "app">
  <form action="" method="POST" accept-charset="UTF-8" @submit.prevent="validateLoginForm()">
      <label for="firstName">First Name</label>
        <input 
            :class = "{'red-border': errors.firstName}" 
            type="text" 
            @focus="deleteErrors('firstName')"
            v-model="register.firstName">
        <input type="submit" value="Register">
  </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>

JSFiddle：http://jsfiddle.net/6L3shqdk/14/

如您所见，当输入获得焦点时，firstName的错误应该为空，以便将使用绑定应用的类设置为false并消失。但这没有发生。请帮忙！

Answer 1

删除此行

this.errors = {};

它完全破坏了反应能力。基本上，它会用一个新的空白对象（该对象具有firstName属性的设置方法）覆盖一个新的空白对象，该对象不再能够监视firstName的更改。

应该是这样的：

validateLoginForm() {
  const regsrt = this.register;

  if (!regsrt.firstName) {
    this.errors.firstName = 'First Name is required';
  } else {
    this.errors.firstName = '';
  }
},

VueJS类绑定无法正常工作

1 个答案: