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()返回的值，该值仅在呈现组件模板时运行一次，并且在该点之后不会发生变化

从patch here开始，您似乎为表单模型提供了$invalid属性：

表示给定模型的验证状态。当选项中指定的任何子验证器返回虚假值时，它变为真。如果是验证组，则会考虑所有分组验证器。

请改用：

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

Answer 2

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

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

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

2 个答案: