【vue】禁止重复点击发送多次请求

水深无声 2023-09-26 11:56 14阅读 0赞

### 在提交按钮添加loading，通过loading状态防止多次点击![在这里插入图片描述][25e5b6602e314e6a8f8e79b919545211.png] ###

Element：[https://element.eleme.cn/2.13/\#/zh-CN/component/button][https_element.eleme.cn_2.13_zh-CN_component_button]

<div class="flex-c">
       <el-button type="primary" @click="getModifyPersonalInfo(form)" :loading="loading">保存</el-button>
    </div>

export default {
        
      data() {
        
        return {
        
            loading: false
        }
     }

methods: {
        
       getModifyPersonalInfo(form) {
        
          this.$refs.form.validate((valid) => {
        
            if (valid && this.form.hjdxzqh != "110000000000") {
        
              this.loading = true
              const params = {
         ...this.form }
              modifyPersonalInfo(params).then((res) => {
        
                this.$message.success("保存成功")
              })
              .finally(() => {
        
                this.loading = false
              })
            } else {
        
              this.$message.error("您的个人信息输入有误，请查证后修改(若您的户籍地行政区划为北京市的请精确到区级)")
            }
          })
        }
    }

[25e5b6602e314e6a8f8e79b919545211.png]: https://img-blog.csdnimg.cn/25e5b6602e314e6a8f8e79b919545211.png
[https_element.eleme.cn_2.13_zh-CN_component_button]: https://element.eleme.cn/2.13/#/zh-CN/component/button

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

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

解决Vue按钮多次点击重复提交数据问题这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下。 ...

短命女/ 2024年04月17日 14:16/ 0 赞/ 89 阅读

相关 Vue如何避免用户多次点击请求

在Web应用程序开发中，用户往往会通过点击按钮或触发事件来执行特定的操作，例如提交表单或发送网络请求。然而，如果用户在短时间内多次点击按钮，可能会导致重复的请求发送到服务器，造

亦凉/ 2024年03月02日 10:03/ 0 赞/ 83 阅读

相关【vue】禁止重复点击发送多次请求

在提交按钮添加loading，通过loading状态防止多次点击![在这里插入图片描述][25e5b6602e314e6a8f8e79b919545211.png] El

水深无声/ 2023年09月26日 11:56/ 0 赞/ 15 阅读

相关前端禁止按钮多次点击连续提交的方法

> 积跬步至千里一般情况下，如果代码质量和网络环境都还不错的情况下，基本点击了一个按钮向后台提交数据后，就会有响应的提交提示，但是如果出现不稳定的情况，可能就会出现点一次

ゝ一纸荒年。/ 2022年12月28日 12:43/ 0 赞/ 226 阅读

相关 vue防止多次点击（暴力点击）

工具类noDbClick.js export default { }.install = (Vue, options = { }) => { V

╰+哭是因爲堅強的太久メ/ 2022年12月26日 10:11/ 0 赞/ 289 阅读

相关 vue使用echarts 点击事件点击一次触发多次

问题描述现项目中需求是切换公司就要更新地图，就需要重新渲染这个echarts图，一旦重新渲染后会出现累加情况，它会根据你渲染的次数调用点击事件，即点击一次触发多次

偏执的太偏执、/ 2022年12月16日 13:25/ 0 赞/ 300 阅读

相关 Android防止多次点击

一、利用系统时间差 / 最后一次点击时间map / private static Map<String, Long> lastClickTimeMap;

待我称王封你为后i/ 2022年11月19日 01:07/ 0 赞/ 255 阅读

相关 CSS模糊效果、禁止点击、Vue获取点击元素

1.在Vue的点击事件中如何获取当前的点击的元素或是当前click事件绑定的元素。首先vue的点击事件是用 @click = “clickfun()” 属性在h

电玩女神/ 2022年10月01日 06:51/ 0 赞/ 264 阅读

相关禁止鼠标多次点击选中div中的文字

来源：[http://www.cnblogs.com/myjiejie/archive/2010/12/04/1896327.html][http_www.cnblogs.co

雨点打透心脏的1/2处/ 2022年06月18日 06:45/ 0 赞/ 258 阅读

相关 iOS客户端防止发送重复点击发请求

> > OS客户端经常遇到点击某个按钮发送一个请求到服务器，貌似一个非常简单的需求有的时候其实并不是那么简单，比如网络不好的时候，用户重复点击一个按钮会发送多次请求，比如在我负

左手的ㄟ右手/ 2022年04月08日 08:42/ 0 赞/ 380 阅读