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

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

事件分为两种情况：

•第一种： 不操作数据型

•第二种： 操作数据型

<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 按钮多次点击重复提交数据问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue组件中点击按钮后修改输入框的状态实例代码
  • 使用vue实现点击按钮滑出面板的实现代码
  • vue.js前后端数据交互之提交数据操作详解
  • Vue axios 中提交表单数据(含上传文件)
赞 (0)

相关推荐

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

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

    这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型 <template> <button @click="submit()" :disabled="isDisable">点击</button> </template> <script> export default { name: 'TestButton',

  • 注册或者点击按钮时,怎么防止用户重复提交数据(实例讲解)

    asp.net实现点击按钮后设按钮不可用并提交 复制代码 代码如下: <asp:Button ID="Button1" runat="server" Text="123456" OnClientClick="this.disabled=true;this.form.submit(); "  UseSubmitBehavior= "False"  onclick="Button1_Click&

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • 解决vue表单为空也能提交的问题

    解决vue表单为空也能提交的问题

    目录 vue表单为空也能提交 大概是这样写的 vue的表单提交方式 vue表单收集和提交 vue表单为空也能提交 今天在用Vue写表单验证的时候,习惯性把v-model绑定的值设置为null,然后再测试的时候,发现如果填写了表单后,又删除输入的内容,竟然能提交上去,百思不得其解. 最后通过vue devtools这个工具找到了问题所在. 大概是这样写的 <input v-model="ipt"  /> data () {     return {         ipt:

  • JSP防止网页刷新重复提交数据的几种方法

    本篇文章主要介绍了网页如何防止刷新重复提交与如何防止后退的解决方法,具体如下: 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办? 使用Session 在提交的页面也就是数据库处理之前: if session("ok")=true then response.write "错误,正在提交" response.end end if 数据处理完后,修改session("ok")=false. 数据处理成功马上Redirec

  • Asp.Net防止刷新重复提交数据的办法

    在网上搜 一下,可以找到很多关于这方面的资料,其中有一篇是来自MSDN上的一种解决方法: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvs05/html/BedrockASPNET.asp 它是通过重新定义 System.Web.UI.Page 类来实现加载页面时,是"刷新"."后退"请求,还是正常请求,其他的页面则继承了自定义的这 个Page类.感觉他这个方法比较独特,有例子

  • PHP防止post重复提交数据的简单例子

    在某帝国面试的时候问题了这个题: 怎么处理post提交重复的问题, 后来跟@暖阳交流,他说记录时间,我没有明白,我想的是用session在表单页面记录下,然后提交页面判断,如果相等则视为成功,并清空session,但有个问题是如果表单页面是html的呢,乍办?要不调个php验证的页面?类似验证码的功能. 还有的说用 header头设置过期时间...但没试.以下是我php写的,经测试可用. 复制代码 代码如下: <?php//开启sessionsession_start(); //如果有提交标识i

  • SpringBoot + Redis如何解决重复提交问题(幂等)

    SpringBoot + Redis如何解决重复提交问题(幂等)

    目录 幂等: 解决方案: 一.搭建Redis服务 二.自定义注解 三.Token创建和校验 四.拦截器配置 五.正常Sevice类 六.Controller类 七.测试 在开发中,一个对外暴露的接口可能会面临瞬间的大量重复请求,如果想过滤掉重复请求造成对业务的伤害,那就需要实现幂等 幂等: 任意多次执行所产生的影响均与一次执行的影响相同.最终的含义就是 对数据库的影响只能是一次性的,不能重复处理. 解决方案: 数据库建立唯一性索引,可以保证最终插入数据库的只有一条数据 token机制,每次接口请

  • 常见表单重复提交问题整理及解决方法

    /** * * @authors Benjamin * @date 2013-11-13 10:16:59 */ 一.常见的重复提交问题 a>点击提交按钮两次. b>点击刷新按钮. c>使用浏览器后退按钮重复之前的操作,导致重复提交表单. d>使用浏览器历史记录重复提交表单. e>浏览器重复的HTTP请求. 二.防止表单重复提交的方法 a>禁掉提交按钮.表单提交后disabled现在的按钮或者取消该按钮的点击事件或者默认事件.这种方法防止心急的用户多次点击按钮.但有个问

  • 几种防止表单重复提交的方法

    几种防止表单重复提交的方法

    表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 几种防止表单重复提交的方法 禁掉提交按钮.表单提交后使用Javascript使提交按钮disable.这种方法防止心急的用户多次点击按钮.但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了. 我之前的文章曾说过用一些

随机推荐