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 les clics multiples sur le bouton vue et la soumission répétée de données. Quelles sont les précautions lors de clics multiples sur le bouton vue ? .

Il s’agit en fait d’un problème très détaillé. Si nous actionnons un bouton, alors lions l' événement lorsque l'on clique sur le bouton.

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

•Le premier type : 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 définissons désactivé pour contrôler si le bouton est cliquable ou non en contrôlant isDisable. 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
}
})
}
}

Principe de mise en œuvre : modifiez l'attribut du bouton via la minuterie. Après avoir cliqué, l'attribut du bouton est défini sur désactivé

L'attribut de désactivation du bouton lié à la vue est : désactivé. :'nom de la variable '

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 :

Explication détaillée des étapes pour implémenter une calculatrice simple avec JS

Gestion du routage React Explication détaillée des étapes pour utiliser React Router

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!