1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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。

所以用户必须1秒后才能再次点击,那个时候,模态框已经关闭了。可以设置为1500合适

解决vue多次提交的更多相关文章

  1. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  2. php解决表单重复提交

    php解决表单重复提交时间:2015-2-28 | 评论:1条评论 | 被查看了 189 次 | 标签:php, W3cui重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交 ...

  3. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  4. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  5. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  6. 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数

    1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进 ...

  7. Struts2中解决表单重复提交

    3. 表单的重复提交问题 1). 什么是表单的重复提交 > 在不刷新表单页面的前提下:  >> 多次点击提交按钮 >> 已经提交成功, 按 "回退" ...

  8. eclipse中修改tomcat的配置,解决全局性的get提交乱码问题

    在项目中如果页面提交方式为get的时候,中文会出现乱码. 为了解决乱码问题我们有两种办法. 第一种:在程序中加入get提交乱码的解决 String username = new String(user ...

  9. 解决jsp两种提交方式乱码 的方法

    解决中文乱码 ---post提交方式  需要在处理页面添加request.setCharacterEncoding("utf-8"); 制定请求的编码,调用一下request.ge ...

随机推荐

  1. Vinagre(Gnome Remote Desktop) cannot connect to RDP Server

    In a Sudden , this client cannot be used. Tried to install kdenetwork-krdc , then found there are de ...

  2. selenium--高亮显示正在操作的元素

    前戏 在进行web自动化的时候,如果我们想知道正在操作的元素,我们可以通过js的方式来实现 实战 from selenium import webdriver import unittest, tim ...

  3. 洛谷 P3374 【模板】树状数组 1 题解

    P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入格式 第一行包含两个整数N.M,分别表示该数列数字的个数 ...

  4. BBS项目-01

    目录 BBS项目 BBS开发流程: BBS表格创建: BBS项目 BBS开发流程: BBS项目: 开发流程: 需求分析 草拟一些项目的大致技术点和流程 架构设计 架构师(框架 语言 数据库 缓存数据库 ...

  5. redis 下key的过期时间详解 :expire

    memcached 和 redis 的set命令都有expire参数,可以设置key的过期时间.但是redis是一个可以对数据持久化的key-value database,它的key过期策略还是和me ...

  6. Powershell更新

    问题:在vin7电脑启动vagrant up 提示powershell版本过低. 在vin7电脑启动vagrant up 提示powershell版本过低: The version of powers ...

  7. udev规则(转)

    Writing udev rules by Daniel Drake (dsd)Version 0.74 The most recent version of this document can al ...

  8. Failed to contact the endpoint at http://controller:35357/ for discovery. Fallback to using that endpoint as the base url.

    问题描述 openstack安装过程中,执行 openstack domain create --description "Domain" example 报错如下: Failed ...

  9. MySQL 索引小结

    1.!=.not in 在primary key上使用 !=.not in,explain 的 type 是 range,非primary key是全表扫描(即非主键字段即使有索引也无法应用) 2.a ...

  10. [转帖]智能合约和 DApp

    智能合约和 DApp https://www.jianshu.com/p/5e7df3902957 2018.10.08 19:50:41字数 3,403阅读 9,819 2017年11月份和2018 ...