How to handle repeated submission of data when the Vue button is clicked multiple times

This time I will show you how to handle multiple clicks of the vue button and repeated submission of data. What are the precautions for dealing with multiple clicks of the vue button? . Here is a practical case. Let’s take a look. .

This is actually a very detailed issue. If we operate a button, then bind the event when the button is clicked.

Events are divided into two situations:

•The first one: No data type operation

•The second type: Operation data type

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

here We control isDisable to set disabled to control whether the button is clickable or unclickable. 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.

The following is an example code for everyone

Button in vue multiple clicks to submit the example code

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

implementation Principle: The buttonattribute is changed through the timer. After clicking, the button attribute is set to disable

The disable attribute of the vue-bound button is: disabled:'Variable name'

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement a simple calculator in JS

React routing management Detailed explanation of the steps to use React Router

The above is the detailed content of How to handle 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!