複数のクリックを停止するvue.js

Question

私のvue.jsアプリケーションでは、項目を削除できます。

div要素は次のようになります。

<div class="ride-delete" @click="delete"> 
     <p>Delete</p> 
</div> 

これはclickを処理するメソッドです：

methods: { 
    delete() 
    { 
     swal({ 
     title: "Weet u het zeker?", 
     text: "Het is niet mogelijk deze handeling te herstellen!", 
     cancelButtonText: 'Stop', 
     type: "error", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Ja, verwijder deze rit.", 
     closeOnConfirm: false 
     },() => { 
     RideService.destroy(this.ride) 
      .then(() => { 
      swal({ 
       title: "Rit succesvol verwijderd", 
       type: "success", 
       showCancelButton: false, 
       timer: 2000, 
       showConfirmButton: false 
      }); 
      this.$router.go('/administratie/ritten'); 
      }); 
     }); 
    } 
    } 

それでは、どのように私は、ユーザーがそれぞれの後に高速3回クリックするとことを確認することができます他には1つのリクエストしか送信しません。今すぐ送信3があります。ユーザーが一度クリックすると、ボタンは無効になります。

--EDIT--

import swal from 'sweetalert'; 
import RideService from '../../services/RideService'; 

export default { 

    data() { 
    return { 
     ride: { user: {}, location: {}, type: {} }, 
     deleting: false 
    } 
    }, 

    route: { 
    data ({ to }) { 
     return RideService.show(this.$route.params.rideId) 
     .then(function(data) 
     { 
      this.ride = data.data.ride; 
     }.bind(this)); 
    } 
    }, 

    methods: { 
    remove() 
    { 
     if (!this.deleting) { 
     this.deleting = true 
     swal({ 
      title: "Weet u het zeker?", 
      text: "Het is niet mogelijk deze handeling te herstellen!", 
      cancelButtonText: 'Stop', 
      type: "error", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Ja, verwijder deze rit.", 
      closeOnConfirm: false 
     },() => { 
      RideService.destroy(this.ride) 
      .then(() => { 
       swal({ 
       title: "Rit succesvol verwijderd", 
       type: "success", 
       showCancelButton: false, 
       timer: 2000, 
       showConfirmButton: false 
       }); 
       this.deleting = false 
       this.$router.go('/administratie/ritten'); 
      }); 
     }); 

     this.deleting = false 
     } 
    } 
    } 
}  
</script> 

--edit 2--

<template> 
    <div class="row center"> 
    <div class="panel ride"> 
     <div class="ride-title bar-underline"> 
     <div class="ride-item-title"> 
      <strong class="ride-item-title-body">Rit van {{ ride.created_at }}</strong> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Naam</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.user.name }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Locatie van</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.from }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Locatie naar</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.from }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Beschrijving</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.description }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Kmz</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.kmz }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>kmp</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.kmp }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Uren</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.hour }} uur</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Google maps</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.location.maps }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Datum</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.created_at }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Tijd</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.time }}</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Factureerbare tijd</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.billabletime }} uur</p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Type</p> 
     </div> 

     <div class="ride-item-content"> 
      <p>{{ ride.type.name }}</p> 
     </div> 
     </div> 

     <div class="ride-item"> 
     <div class="ride-edit"> 
      <p>Edit</p> 
     </div> 

     <div class="ride-delete" @click="remove"> 
      <p>Delete</p> 
     </div> 
     </div> 
    </div> 
    </div>    
</template> 

<script> 

import swal from 'sweetalert'; 
import RideService from '../../services/RideService'; 

export default { 

    data() { 
    return { 
     ride: { user: {}, location: {}, type: {} }, 
     processing: false 
    } 
    }, 

    route: { 
    data ({ to }) { 
     return RideService.show(this.$route.params.rideId) 
     .then(function(data) 
     { 
      this.ride = data.data.ride; 
     }.bind(this)); 
    } 
    }, 

    methods: { 
    remove() 
    { 
     if (this.processing === true) { 
     return; 
     } 
     this.processing = true 
     swal({ 
      title: "Weet u het zeker?", 
      text: "Het is niet mogelijk deze handeling te herstellen!", 
      cancelButtonText: 'Stop', 
      type: "error", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Ja, verwijder deze rit.", 
      closeOnConfirm: false 
     },() => { 
      RideService.destroy(this.ride) 
      .then(() => { 
       swal({ 
       title: "Rit succesvol verwijderd", 
       type: "success", 
       showCancelButton: false, 
       timer: 2000, 
       showConfirmButton: false 
       }); 
       this.processing = false 
       this.$router.go('/administratie/ritten'); 
      }); 
     }); 

     this.processing = false 
    } 
    } 
}  
</script> 

Answer 1

（例えば、処理：false、ユーザーが要素をクリックしてtrueに設定した場合）、delete（）メソッド内で状態をチェックしてコードを続行または停止します。最後に、成功/失敗ハンドラの状態をリセットします。

例えば

：

new Vue({ 
 
    el: '#app', 
 
    
 
    data: { 
 
    processing: false 
 
    }, 
 
    
 
    methods: { 
 
    delete(el) { 
 
     // terminate the function 
 
     // if an async request is processing 
 
     if (this.processing === true) { 
 
     return; 
 
     } 
 
     
 
     // set the async state 
 
     this.processing = true; 
 
     
 
     var paragraphs = Array.from(this.$el.querySelectorAll('p')); 
 
     
 
     // simulating the async request 
 
     setTimeout(() => { 
 
     if (paragraphs.length) { 
 
      paragraphs.shift().remove(); 
 
     } 
 
     
 
     // on success or failure 
 
     // reset the state 
 
     this.processing = false; 
 
     }, 3000); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> 
 
<div id="app"> 
 
    Processing: {{ processing }} <br> 
 
    <button @click.prevent="delete()"> 
 
    Click here to delete a paragraph 
 
    </button> 
 

 
    <p v-for="1 in 3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia adipisci, omnis cum odit modi perspiciatis aliquam voluptatum consectetur. Recusandae nobis quam quisquam magnam blanditiis et quos beatae quasi quia! 
 
    </p>

Answer 2

この

<div class="ride-delete" v-on:click="delete()"> 
    <p>Delete</p> 
</div> 

Answer 3

この

<div class="ride-delete" v-show="!deleting" @click="delete"> 
    <p>Delete</p> 
</div> 

を試してみ私は、データプロパティに非同期要求の状態を保存することをお勧めしたい

methods: { 
    delete() 
    { 
    if (!this.deleting) { 
     this.deleting = true 

     swal({ 
     title: "Weet u het zeker?", 
     text: "Het is niet mogelijk deze handeling te herstellen!", 
     cancelButtonText: 'Stop', 
     type: "error", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Ja, verwijder deze rit.", 
     closeOnConfirm: false 
     },() => { 
     RideService.destroy(this.ride) 
      .then(() => { 
      swal({ 
       title: "Rit succesvol verwijderd", 
       type: "success", 
       showCancelButton: false, 
       timer: 2000, 
       showConfirmButton: false 
      }); 
      this.deleting = false; 
      this.$router.go('/administratie/ritten'); 
      }); 
     }); 
    } 
    } 
} 

Answer 4

誰もまだ苦しん@clickがある場合は、click.once @ が唯一の方法で1回実行され、方法を何度も実行されます。 "ログイン"問題を解決するためにこれを使用しました。ボタンを複数回クリックすると、URLは複数回プッシュされるので、例えば： localhost：8000/admin/oms/admin/oms/admin/oms

良いドキュメントです。どうぞご覧ください！ https://alligator.io/vuejs/events/