Comment gérer la soumission répétée de données lorsque le bouton vue est cliqué plusieurs fois

Cette fois, je vais vous montrer comment gérer plusieurs clics sur le bouton vue pour soumettre des données à plusieurs reprises. Quelles sont les précautions lors du traitement de plusieurs clics sur le bouton vue et de la soumission répétée de données ici ? sont des cas pratiques.

Les événements sont divisés en deux situations :

•La première : Type d'opération sans données

•Le deuxième type : Type de données d'opération

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

Ici, nous contrôlons isDisable pour définir désactivé pour contrôler si le bouton est cliquable ou non. La valeur par défaut isDisable: est false et le bouton peut être cliqué. Lorsque nous cliquons sur ce bouton, définissons d'abord la liaison du bouton isDisable sur true, et définissons-la immédiatement sur false après 1 seconde. L'utilisateur n'a donc qu'une seconde pour actionner ce bouton.

Ce qui suit est un exemple de code pour vous

Cliquez plusieurs fois sur le bouton pour soumettre l'exemple de 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
}
})
}
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les gardes de route dans les routes angulaires

Résumé des méthodes de saut de route React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!