使用 Vee-validate 禁用按钮，直到正确填写表单

Question

我想在我的表单填写正确之前禁用我的提交按钮，这是我目前所拥有的：

 <form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

在我开始输入值后，上面的代码只打印一条错误消息并禁用我的提交按钮。在开始与输入交互之前，我需要从一开始就禁用它，这样我就无法发送空字符串。

另一个问题是是否有比使用 v-if 更好的方法来做到这一点？

编辑：

  userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }

原文由 Green_qaue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您需要的所有值都被填充之前禁用按钮的一种方法是使用计算属性，如果所有值都已分配或未分配，该属性将返回 bool

例子：

像这样创建一个计算属性：

 computed: {
  isComplete () {
    return this.username && this.password && this.email;
  }
}

并将其绑定到 html disabled 属性为：

 <button :disabled='!isComplete'>Send Invite</button

这意味着，如果 !isComplete 为真，则禁用按钮

此外，在您的情况下，您不需要两个 if/else 绑定按钮。您可以只使用一个来根据表单是否已完成 或 是否有任何错误来隐藏/显示它：

 <button :disabled="errors.any() || !isCompleted" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>

在填写所有字段并且未发现错误之前，此按钮将被禁用

原文由 samayo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可能最简单的方法是使用 ValidationObserver 表单插槽。像这样：

 <ValidationObserver v-slot="{ invalid }">
  <form @submit.prevent="submit">
    <InputWithValidation rules="required" v-model="first" :error-messages="errors" />
    <InputWithValidation rules="required" v-model="second" :error-messages="errors" />
    <v-btn :disabled="invalid">Submit</v-btn>
  </form>
</ValidationObserver>

更多信息 - 验证观察者

原文由 Saulius 发布，翻译遵循 CC BY-SA 4.0 许可协议