So gehen Sie mit der wiederholten Übermittlung von Daten um, wenn mehrmals auf die Vue-Schaltfläche geklickt wird

Dieses Mal zeige ich Ihnen, wie Sie mit mehreren Klicks auf die Vue-Schaltfläche und wiederholter Übermittlung von Daten umgehen. Was sind die Vorsichtsmaßnahmen, wenn Sie mit mehreren Klicks auf die Vue-Schaltfläche umgehen? . .

Dies ist eigentlich eine sehr detaillierte Angelegenheit. Wenn wir eine Schaltfläche betätigen, dann binden wir das Ereignis , wenn auf die Schaltfläche geklickt wird.

Ereignisse werden in zwei Situationen unterteilt:

•Der erste Typ: Kein Datenoperationstyp

•Der zweite Typ: Operationsdatentyp

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

Hier Wir steuern isDisable, um „disabled“ festzulegen und so zu steuern, ob die Schaltfläche anklickbar oder nicht anklickbar ist. Der Standardwert ist Disable: Der Wert ist false und die Schaltfläche kann angeklickt werden. Wenn wir auf diese Schaltfläche klicken, setzen wir zunächst die Bindung isDisable der Schaltfläche auf true und nach 1 Sekunde sofort auf false. Der Benutzer hat also nur eine Sekunde Zeit, diese Taste zu betätigen.

Das Folgende ist ein Beispielcode, den Sie hinzufügen können

Schaltfläche in Vue für wiederholte Übermittlung mehrmals klicken

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

Implementierungsprinzip: Das Schaltflächen-Attribut wird durch den Timer geändert. Nach dem Klicken wird das Schaltflächenattribut auf „Deaktivieren“ gesetzt.

Das Deaktivierungsattribut der vue-gebundenen Schaltfläche lautet: deaktiviert :'Variablenname'

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Schritte zur Implementierung eines einfachen Rechners in JS

React Routing Management Detaillierte Erklärung der Schritte zur Verwendung von React Router

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit der wiederholten Übermittlung von Daten um, wenn mehrmals auf die Vue-Schaltfläche geklickt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!