解决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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
ES6字符串的扩展实例
Dec 21 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
php5新改动之短标记启用方法
2008/09/11 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
ptyhon实现sitemap生成示例
2014/03/30 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
学生思想表现的评语
2014/01/30 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
争论的故事教学反思
2014/02/06 职场文书
关于环保的活动方案
2014/08/25 职场文书
普通党员对照检查材料
2014/09/24 职场文书
中秋节寄语2015
2015/03/24 职场文书
比赛主持人开场白
2015/05/29 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL