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

Question

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

Answer 1

建议使用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>

 

Answer 2

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