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

実装原則: タイマーを通じてボタン

プロパティを変更し、ボタンプロパティを次のように設定します。 disablevue バインディング ボタンの disable 属性は次のとおりです: 無効:'

変数名

' この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連記事は PHP 中国語 Web サイトにあります。

推奨書籍:

JS で単純な計算機を実装する手順の詳細な説明

React ルーティング管理 React Router を使用する手順の詳細な説明

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