3

如果所有字段都不符合要求的条件,我如何有条件地禁用我的 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>
4

2 回答 2

9

目前,您正在绑定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">
于 2017-08-15T13:42:28.970 回答
0

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

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

于 2020-08-28T19:27:06.453 回答