Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-22 11:37:28
original
4003 Les gens l'ont consulté

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>
Copier après la connexion

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
}
})
}
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal