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

Question

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

Answer 1

建议使用ref，给button添加注册ref引用，然后在表单提交的时候，获取button按钮，使其disable置灰。ref&nbsp;被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的&nbsp;$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。123<div&nbsp;id="app">&nbsp;&nbsp;<button&nbsp;ref="mybutton"&nbsp;type="primary"&nbsp;@click="save">保存</button></div>&nbsp;12345678910111213141516171819<script>new&nbsp;Vue({&nbsp;&nbsp;el:&nbsp;"#app",&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;},&nbsp;&nbsp;methods:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;save()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$refs.mybutton.disabled&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;}})</script><style>:disabled{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#DDD;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#F5F5F5;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:#ACA899;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</style>&nbsp;

Answer 2

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