解决vue 按钮多次点击重复提交数据问题


Posted in Javascript onMay 10, 2018

这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件。

事件分为两种情况:

•第一种: 不操作数据型

•第二种: 操作数据型

<template>
 <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

这里我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false,按钮可以点击。 当我们点击这个按钮的时候,首先将按钮的绑定isDisable设置为true,1秒后立马将其置为false。 所以用户只能有一秒的时间去操作这个按钮。

下面给大家补充一个实例代码

vue中button 多次点击重复提交的实例代码

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,2000)
this.disabled = true
}
})
}
}

实现原理:通过计时器讲button属性更改,点击完之后讲button属性设置为disable

vue绑定button的disable属性为:disabled:'变量名'

总结

以上所述是小编给大家介绍的vue 按钮多次点击重复提交数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
javascript call和apply方法
Nov 24 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
javascript学习之闭包分析
Dec 02 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 #Javascript
vue计算属性和监听器实例解析
May 10 #Javascript
js正则相关知识点专题
May 10 #Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 #Javascript
Javascript Promise用法详解
May 10 #Javascript
jQuery实现模糊查询的方法分析
May 10 #jQuery
async/await地狱该如何避免详解
May 10 #Javascript
You might like
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
js常用排序实现代码
2010/12/28 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python多继承原理与用法示例
2018/08/23 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python实现代码块儿折叠
2020/04/15 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python和Bash结合在一起的方法
2020/11/13 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
运动会领导邀请函
2014/01/10 职场文书
经管应届生求职信范文
2014/05/18 职场文书
化学教育专业求职信
2014/07/08 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
刑事申诉状范文
2015/05/20 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
诚实守信主题班会
2015/08/13 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Python代码实现双链表
2022/05/25 Python