vue.js - 如何使用 veeValidate 中的 validateAll 作为计算属性禁用表单？

Question

假设我在组件中有此按钮，并希望动态禁用该按钮，直到用户使用有效电子邮件填写 textField。

      <v-btn
        type="submit"
        data-test="btn-identity"
        block
        large
        :disabled="!validEmail"
        color="primary">{{ $t('button.identity') }}
      </v-btn>


    <v-text-field
      v-validate="'required|email'"
      v-model="form.userId"
      :label="$t('placeholder.userId')"
      :error-messages="errors.collect('email')"
      data-vv-name="email"
      required
      autofocus
    />

我将有效的电子邮件设置为计算属性，但它似乎不起作用，因为它是一个承诺

  computed: {
    validEmail () {
      return this.$validator.validateAll().then((result) => {
        return result;
      })
    }
  },

Answer 1

Vue 中的计算属性是同步的。您可以尝试 vue-async-computed 或使用观察者

<v-btn
        type="submit"
        data-test="btn-identity"
        block
        large
        :disabled="!validEmail"
        color="primary">{{ $t('button.identity') }}
      </v-btn>


<v-text-field
  v-validate="'required|email'"
  v-model="form.userId"
  :label="$t('placeholder.userId')"
  :error-messages="errors.collect('email')"
  data-vv-name="email"
  required
  autofocus
/>

watch: {
    "form.userId": function (newId, oldId) {
          this.$validator.validateAll().then((result) => {
              this.validEmail = result; // use a separate method to set validEmail here 
      })
    }
},

我还找到了用于异步验证的 vee-validate 文档。它与我上面建议的想法相同：https ://vee-validate.logaretm.com/examples.html#coupon-example