解决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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
Python多进程同步简单实现代码
2016/04/27 Python
python中hashlib模块用法示例
2017/10/30 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python字典的值可以修改吗
2020/06/29 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
党校培训自我鉴定范文
2014/04/10 职场文书
爱牙日活动总结
2014/08/29 职场文书
机关党员公开承诺书
2014/08/30 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技