How to deal with repeated submission of data when the vue button is clicked multiple times

This time I will show you how to deal with multiple clicks of the vue button to submit data repeatedly, and what are the precautions for dealing with multiple clicks of the vue button . Here is a practical case, let’s take a look. .

Events are divided into two situations:

•The first one: No data operation type

•The second type: Operation data type

<template>
 <button>点击</button>
</template>
<script>
 export default {
  name: &#39;TestButton&#39;,
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

Here we set disabled to control the clickability and non-clickability of the button by controlling isDisable. The default isDisable: value is false and the button can be clicked. When we click this button, first set the button's binding isDisable to true, and immediately set it to false after 1 second. So the user only has one second to operate this button.

Let me add an example code for you

Button in vue. Click the example code for repeated submission multiple times

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
}
})
}
}

Believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use routing guards in Angular routing

React routing jump method summary

The above is the detailed content of How to deal with repeated submission of data when the vue button is clicked multiple times. For more information, please follow other related articles on the PHP Chinese website!