Question

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

这是我的电子邮件输入（在哈巴狗）：

.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
    }
  }
  //...
};

Vue - 如何使用现有值观看输入

1 个答案: