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

我有一个电子邮件输入和一个检查输入是否有效的观察者。但是，只有在“电子邮件”字段中键入内容时，才会触发“监视”事件。电子邮件字段的现有值可能无效，也可能无效。如果电子邮件无效，则显示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);
        }
    }
}

这是我的电子邮件输入（帕格）：

---

Vue对此有一个选项

immediate:true

。这意味着在开始时也将使用初始值执行watch函数。请参见中的选项：立即

---

Vue对此有一个选项

immediate:true

。这意味着在开始时也将使用初始值执行watch函数。请参见中的选项：立即

---

伟大的这就是我要找的。太好了！这就是我要找的。

.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'))")

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