解决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 相关文章推荐
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
Jquery ajax基础教程
Nov 20 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
vue component组件使用方法详解
Jul 14 Javascript
vuex存储token示例
Nov 11 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
小程序实现列表倒计时功能
Jan 29 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作的文本留言本的例子(五)
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP 正则表达式小结
2015/02/12 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python dumps和loads区别详解
2020/02/04 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
投标邀请书范文
2014/01/31 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
数学教师求职信范文
2015/03/20 职场文书
学生检讨书范文
2019/06/24 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
使用Python拟合函数曲线
2022/04/14 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python