vue.js怎样解决按钮多次点击重复提交
展开全部
建议使用ref,给button添加注册ref引用,然后在表单提交的时候,获取button按钮,使其disable置灰。
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。
<div id="app">
<button ref="mybutton" type="primary" @click="save">保存</button>
</div>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
save() {
this.$refs.mybutton.disabled = true;
}
}
})
</script>
<style>
:disabled{
border: 1px solid #DDD;
background-color: #F5F5F5;
color:#ACA899;
}
</style>
展开全部
设置标志性变量为ture,如 isAbled,然后在按钮初次点击后设为false,在提交请求返回后设为true,然后该变量可以在button的disable属性上使用,也可以自定义按钮,用于动态控制class,同时在点击事件回调里面进行相关判断拦截
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<div id="app">
<button :disabled="disabled" type="primary" @click="save">保存</button>
</div>
new Vue({
el: "#app",
data: {
disabled: false
},
methods: {
save() {
this.disabled = true;
ajax().then(()=>{
this.disabled = false;
},()=>{
this.disabled = false;
})
}
}
})
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询