Vue-在啟用禁用的按鈕之前添加延遲

Question

我有一個最初被禁用的提交按鈕（通過v-bind:disabled ），只有在所有表單輸入都為非空且錯誤解決后才會被啟用。 對於我的每個輸入，我都有一個微調器，在驗證輸入的有效性之后，該微調器將成為支票或x。 這需要幾秒鍾，我希望將相同的延遲應用於啟用提交按鈕。 此刻，表單如下所示：

這是這種形式（在哈巴狗中）：

.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'))")
  span.text-danger.text-error(v-show="errors.has('emailAddress')") {{ errors.first('emailAddress') }}
  span.text-danger.text-error(v-if="email && email.length > 0 && isEmailTaken") Email address has already been taken
.form-group
  label Username
  .input-group
    input.form-control(type="name" name="username"
      v-model="username"
      v-validate
      data-vv-delay="1000"
      data-vv-rules="required|verify_username"
      :class="{ 'input': true, 'is-danger': errors.has('username') }"
      placeholder="eg. andres45")
    .input-group-append
      span.input-group-text
        i.fal.fa-pulse.fa-spinner(v-if="username && usernameBusy")
        i.fal.fa-check.text-green(v-if="username && !usernameBusy && !isUsernameTaken && !errors.has('username')")
        i.fal.fa-times.text-red(v-if="username && !usernameBusy && (isUsernameTaken || errors.has('username'))")
  span.text-danger.text-error(v-show="errors.has('username')") {{ errors.first('username') }}
  span.text-danger.text-error(v-if="username && username.length > 0 && isUsernameTaken") Username has already been taken
.form-group
  button.btn.btn-blue(:disabled="errors.any() || isEmailTaken || isUsernameTaken || !username || !email" type="submit")
    i.fal.fa-sign-in.mr-2
    span Complete Sign Up

Vue實例：

var register = new Vue({ 
  el: '#register',
  data: {
    email: email,
    username: null,

    isUsernameTaken: false,
    usernameTimer: null,
    usernameBusy: false,

    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;
        });
    },
    validateUsername: function(username) {
      var self = this;
      var url = '/api/users/' + username;
      self.$http.get(url)
        .then(function(res){
          self.isUsernameTaken = true;
          self.usernameBusy = false;
        }, function(err){
          self.isUsernameTaken = false;
          self.usernameBusy = false;
        });
    }
  },
  watch: {
    username: function(val) {
      var self = this;
      clearTimeout(self.usernameTimer);
      self.usernameBusy = true;
      self.usernameTimer = setTimeout(function() {
        self.validateUsername(val);
      }, 1600);
    },
    email: function(val) {
      var self = this;
      clearTimeout(self.emailTimer);
      self.emailBusy = true;
      self.emailTimer = setTimeout(function() {
        self.validateEmail(val);
      }, 1600);
    }
  }
});

Answer 1

我在移動設備上對格式設置和缺少代碼表示歉意。 對我來說，我可能會設置一個變量來跟蹤禁用狀態，比如說var isFormComplete = false; 我會使用disabled vue的道具來控制按鈕/表單狀態。 :disabled=“!isFormComplete” 。

然后，我將在JS中設置一個vue watch或什至computed方法，該方法基本上將檢查每個表單控件是否為空或您想要執行的任意值檢查，因為它在后台具有變量，因此是動態的，因此檢查起來應該非常簡單通過每個窗體控件並在滿足所有條件時，將isFormComplete或您要調用的任何值設置為true，即可啟用控件。

為了獲得更多的樂趣和加分，您可以設置一些可重復使用的通用驗證代碼，並將其抽象為vue mixin，並使自己具有可以重復使用的漂亮的自定義表單驗證。 我知道這不是傳統的答案，但是由於我是移動用戶，所以即使缺少代碼，我也覺得這比注釋更深入。 您還可以在驗證方法中添加一個計時器，以在滿足所有條件時延遲所需的時間，然后將禁用的變量設置為false。