如何使用 veeValidate 中的 validateAll 作为计算属性来禁用表单？

Question

假设我在一个组件中有这个按钮，并且想要动态地禁用该按钮，直到用户用有效的电子邮件填写文本字段。

      <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 或使用 watcher

<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

如何使用 veeValidate 中的 validateAll 作为计算属性来禁用表单？

How to disable a form using validateAll from veeValidate as a computed property?

vue.js

vuetify.js

vee-validate

如何使用 veeValidate 中的 validateAll 作为计算 属性 来禁用表单？

How to disable a form using validateAll from veeValidate as a computed property?

vue.js

vuetify.js

vee-validate

如何使用 veeValidate 中的 validateAll 作为计算属性来禁用表单？