全国咨询热线:18720358503

怎么生成微信小程序_解决vue 按钮多次点击重复提

类别:企业动态 发布时间:2021-01-08 浏览人次:

解决vue 按钮多次点击重复提交数据问题       这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下

这个其实是一个很细节的问题。 如果我们操作一个按钮,然后在按钮点击的时候绑定事件。

事件分为两种情况:

第一种: 不操作数据型

第二种: 操作数据型

 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 按钮多次点击重复提

处理vue 按键数次点一下反复递交数据信息难题 本文关键详细介绍了vue 按键数次点一下反复递交数据信息的难题,文中根据案例融合的方式给大伙儿详细介绍的十分详尽,必须的朋...

2021-01-08
贵阳机务段本部道路大修工程施工总价承包招标

贵阳机务段本部道路大修工程施工总价承包招标公告 招标编号 TS-2017-47 中标结果 查看中标结果 招标项目名称 贵阳机务段本部道路大修工程 建设单位 成都铁路局贵阳机务段,成都铁路局...

2021-01-08
如何建立微信小程序_手把手教你vue

从零教你vue-cli宣传单页到多张运用的方式 vue-cli到多张运用序言:是我一个cli建立的vue新项目,可是我觉得制成多张运用,如何办,空话很少说,立即开撸~承诺:增加编码一部分...

2021-01-08
微博营销有哪些特点?

因为新浪微博应用便捷便捷、进到门坎低、运用丰富多彩五彩缤纷、可以迅速得到信息内容并与别人沟通交流,新浪微博集聚了极大的人气值。那麼它都是有甚么特性呢?简易小结一下。...

2021-01-08
搭建专业的企业官网 怎样选择专业的企业建站系

您的部位: > 新闻报道新闻资讯 > 构建技术专业的公司官方网站 如何挑选技术专业的公司建网站系那麼多建网站企业,那麼多建网站方法,那麼大家如何挑选呢? 根据订制网站、传统式...

2021-01-08
SEO优化思维:分析内部链在网站优化过程中的重

SEO提升广州市企业网站建设:剖析內部链在seo优化全过程中的关键功效! SEO提升广州市企业网站建设:剖析內部链在seo优化全过程中的关键功效! SEO提升技术性天津市一年前()274℃你...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信