为了账号安全,请及时绑定邮箱和手机立即绑定

请问vue.js怎样解决按钮多次点击重复提交

请问vue.js怎样解决按钮多次点击重复提交

肥皂起泡泡 2019-10-12 11:07:40
vue.js怎样解决按钮多次点击重复提交
查看完整描述

2 回答

?
杨__羊羊

TA贡献1943条经验 获得超7个赞

建议使用ref,给button添加注册ref引用,然后在表单提交的时候,获取button按钮,使其disable置灰。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。

1

2

3

<div id="app">

  <button ref="mybutton" type="primary" @click="save">保存</button>

</div>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<script>

new Vue({

  el: "#app",

  data: {

  },

  methods: {

      save() {

        this.$refs.mybutton.disabled = true;

    }

  }

})

</script>

<style>

:disabled{   

    border: 1px solid #DDD;   

    background-color: #F5F5F5;   

    color:#ACA899;   

}  

</style>


 



查看完整回答
反对 回复 2019-10-13
?
HUH函数

TA贡献1836条经验 获得超4个赞

设置标志性变量为ture,如 isAbled,然后在按钮初次点击后设为false,在提交请求返回后设为true,然后该变量可以在button的disable属性上使用,也可以自定义按钮,用于动态控制class,同时在点击事件回调里面进行相关判断拦截

查看完整回答
反对 回复 2019-10-13
  • 2 回答
  • 0 关注
  • 895 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信