解决vue 按钮多次点击重复提交数据问题
程序员文章站
2022-05-05 11:49:26
这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件。
事件分为两种情况:
•第一种: 不操作数据型
•第二种:...
这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件。
事件分为两种情况:
•第一种: 不操作数据型
•第二种: 操作数据型
<template> <button @click="submit()" :disabled="isdisable">点击</button> </template> <script> export default { name: 'testbutton', data: function () { return { isdisable: false } }, methods: { submit() { this.isdisable = true settimeout(() => { this.isdisable = false }, 1000) } }, } </script>
这里我们通过控制isdisable 来设置 disabled来控制按钮的点击和不可点击。 默认isdisable:的值为 false,按钮可以点击。 当我们点击这个按钮的时候,首先将按钮的绑定isdisable设置为true,1秒后立马将其置为false。 所以用户只能有一秒的时间去操作这个按钮。
下面给大家补充一个实例代码
vue中button 多次点击重复提交的实例代码
sendcomment () { this.disabled = true if (this.text == ''){ this.$message({ type:'error', message:'输入内容不能为空', }) this.disabled = false }else{ this.$post('/xx/xx/idlegoodscomment',{ goods_id:this.$route.params.id, content:this.text, user_id:window.uid, type:1 }).then((res) => { if(res){ this.getdetail() settimeout(()=>{ this.disabled=false this.getcommentlist() this.text = ''} ,2000) this.disabled = true } }) } }
实现原理:通过计时器讲button属性更改,点击完之后讲button属性设置为disable
vue绑定button的disable属性为:disabled:'变量名'
总结
以上所述是小编给大家介绍的vue 按钮多次点击重复提交数据问题,希望对大家有所帮助
推荐阅读
-
解决vue中post方式提交数据后台无法接收的问题
-
解决vue 按钮多次点击重复提交数据问题
-
vue 指定时间内按钮点击次数限制(解决a标签不能使用disabled属性问题)
-
对于 评论 发送,出现网络延迟、响应慢,用户多次点击发送按钮,怎么解决只生成一次数据存入DB
-
解决vue中post方式提交数据后台无法接收的问题
-
JavaScript实现点击按钮后变灰避免多次重复提交_javascript技巧
-
滚动分页的代码,会多次请求页码,导致数据重复,经过本人测试,是以下代码的问题,但没有找到解决方法,求解决
-
vue按钮多次点击重复提交数据如何处理
-
滚动分页的代码,会多次请求页码,导致数据重复,经过本人测试,是以下代码的问题,但没有找到解决方法,求解决
-
JavaScript实现点击按钮后变灰避免多次重复提交_javascript技巧