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

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

/ 猿问

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

UYOU 2019-07-14 08:08:52

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


查看完整描述

2 回答

?
至尊宝的传说

建议使用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-07-15
?
繁花不似锦

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

查看完整回答
反对 回复 2019-07-15

添加回答

回复

举报

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