vuejs2 - 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 文档中，您似乎$invalid获得了表单模型的属性，该属性：

指示给定模型的验证状态。becomes true when any of it's child validators specified in options returns a falsy value. 如果是验证组，则考虑所有分组的验证器。

改用它：

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

Answer 2

使用 vuelidate 禁用/启用提交按钮的另一种方法：

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