审查如何有条件地禁用“提交”按钮

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表单模型的属性，该属性包括：

指示给定模型的验证状态。当在options中指定的任何子验证程序返回伪造的值时，该属性变为true。对于验证组，将考虑所有分组的验证器。

改用它：

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