Vuelidate 如何有条件地禁用提交按钮

Question

如果所有字段都不符合要求的条件，我如何有条件地禁用 Vuelidate 表单的提交按钮？

我尝试了下面的方法，但 :disabled 只会接受其中的禁用词。

<form>
  <ol>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.username.$error }">
      <label>Username:</label>
      <input v-model.trim="user.username" @input="$v.user.username.$touch()" />
    </li>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.password.$error }">
      <label>Password:</label>
      <input v-model.trim="user.password" @input="$v.user.password.$touch()" />
    </li>

    <li class="submission">
      <button @click.prevent="submitForm" :disabled="$v.form.valid()">Sign In</button>
    </li>
  </ol>
</form>

Answer 1

目前，您正在将 disabled 绑定到 $v.form.valid() 返回的值，该值只会在呈现组件模板时运行一次，并且在那之后不会更改.

从 Vuelidate documentation 看来，您似乎为表单模型提供了 $invalid 属性，其中：

Indicates the state of validation for given model. becomes true when any of it's child validators specified in options returns a falsy value. In case of validation groups, all grouped validators are considered.

改用它：

<button @click.prevent="submitForm" :disabled="$v.form.$invalid">

Answer 2

disable/enable 使用 vuelidate 提交按钮的另一种方法：

<button @click.prevent="submitForm" :disabled="$v.$anyError">

Vuelidate 如何有条件地禁用提交按钮

Vuelidate how to conditionally disable submit button

vuejs2

vuelidate