我想禁用我的提交按钮,直到我的表格填写正确,这是我目前的情况:

<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: []
    }

推荐答案

在填充所有需要的值之前禁用按钮的一种方法是使用一个计算(computed)属性,如果所有值都已赋值或未赋值,该属性将返回bool

例子:

创建一个计算(computed)属性,如下所示:

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>

此按钮将被禁用,直到所有字段都已填充且未发现任何错误

Vue.js相关问答推荐

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

虚拟DOM在Vue中姗姗来迟

有没有办法在 Quasar 中为明暗模式创建我自己的 colored颜色 ?

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

作用域slots和 IE11 的问题

vue js 组件中的 this.$route 只返回 undefined

Vue3在'vue-router'中找不到导出'createWebHistory,createRouter'

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时flash

webpack模块解析失败意外字符'@'

从 Url 中删除查询字符串参数

更新 vue.js 中的数据属性/对象

正确的 vueJS 方法将props与数据同步

Vuetify - 根据另一个 Select 选项过滤 Select 数据

try 通过 Vue.js 中的渲染传递props并观察它们

Vue.js 单向绑定表单

IOS在输入焦点上显示键盘

v-for 中的计算(Computed)/动态(Dynamic) v-model 名称

Vue.js 和 jQuery datepicker/timepicker 双向绑定

使用 CloudFront 部署在 S3 上的 VueJS 应用程序的指定的密钥不存在

如何修复套接字 io 中的 400 错误错误请求?