vue ボタンが複数回クリックされたときにデータが繰り返し送信される場合の対処方法

今回は、vueボタンを複数回クリックしてデータを送信する場合の対処方法と、vueボタンを複数回クリックする場合の注意事項についてご紹介します。

イベントは 2 つの状況に分けられます:

•1 つ目: データ操作なしタイプ

•2 つ目: 操作データタイプ

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

ここでは、ボタンがクリック可能かどうかを制御する isDisable を制御することで無効に設定します。クリックしないでください。 デフォルトの isDisable: 値は false で、ボタンをクリックできます。 このボタンをクリックすると、まずボタンのバインディング isDisable を true に設定し、1 秒後にすぐに false に設定します。 したがって、ユーザーがこのボタンを操作できる時間は 1 秒だけです。

以下はサンプルコードです

vue ボタン 繰り返し送信されるサンプルコードを複数回クリックしてください

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの記事にある他の関連トピックにも注目してください。

推奨読書:

Angular ルートでルート ガードを使用する方法

React のルート ジャンプ方法の概要

以上がvue ボタンが複数回クリックされたときにデータが繰り返し送信される場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。