Vue - 如何观看具有现有值的输入

Question

我有一个电子邮件输入和一个观察者，用于检查输入是否有效。但是，只有当您在电子邮件字段中键入内容时才会触发 watch 事件。电子邮件字段的现有值可能无效，也可能无效。如果电子邮件无效，则显示 x，否则显示检查。但是，由于电子邮件具有现有值，因此即使输入无效，最初也会显示支票。如果用户清除了电子邮件字段，并重新输入了无效的电子邮件，那么这是唯一一次触发观察者并显示 x 的时间。

这是我的 vue 实例：

var register = new Vue({
    el: '#register',
    data: {
        email: document.getElementById('profileEmail').value,
        isEmailTaken: false,
        emailTimer: null,
        emailBusy: false
    },
    methods: {
        validateEmail: function(email) {
            var self = this;
            var url  '/api/users?email=' + email;
            self.$http.get(url)
                .then(function(res){
                    self.isEmailTaken = true;
                    self.emailBusy = false;
                }, function(err){
                    self.isEmailTaken = false;
                    self.emailbusy = false;
                });
    },
    watch: {
        email: function(val) {
            var self = this;
            clearTimeout(self.emailTimer);
            self.emailBusy = true;
            self.emailTimer = setTimeout(function() {
                self.validateEmail(val);
            }, 1600);
        }
    }
}

这是我的电子邮件输入（在 pug 中）：

.form-group
  label Email Address
  .input-group
    input.form-control(type="email" name="emailAddress" value=profile.email
      v-model="email"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|email"
      data-vv-as="email"
      :class="{ 'input': true, 'is-danger': errors.has('emailAddress') }"
      placeholder="eg. andres@gmail.com")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="email && emailBusy")
        i.fal.fa-check.text-green(v-if="email && !emailBusy && !isEmailTaken && !errors.has('emailAddress')")
        i.fal.fa-times.text-red(v-if="email && !emailBusy && (isEmailTaken || errors.has('emailAddress'))")

Answer 1

Vue 有一个选项。

immediate: true. 这意味着 watch 函数也将在开始时使用初始值执行。请参阅api doc中的选项：立即。

export default {
  //...
  watch: {
    email: {
      handler: function(val) {
        /* ... */
      },
      immediate: true
    }
  }
  //...
};