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或使用观察程序

Rate

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

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

1 个答案: