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

【问题标题】：Vuelidate how to conditionally disable submit buttonVuelidate如何有条件地禁用提交按钮
【发布时间】：2017-08-15 13:09:24
【问题描述】：

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

【问题讨论】：

标签： vuejs2 vuelidate

【解决方案1】：

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

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

表示给定模型的验证状态。当Option中指定的任何子验证器返回污垢值时变为真实。如果是验证组，则考虑所有分组的验证器。

改用它：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：