Остановить несколько кликов 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 раза быстрее после каждого другой будет отправлен только один запрос. Прямо сейчас есть отправка 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.once работает только один метод времени. Я использовал это, чтобы решить проблему «Войти». Потому что, если я нажимаю кнопку несколько раз, она нажимает URL несколько раз, например: localhost: 8000/admin/oms/admin/oms/admin/oms

Вот хорошие документы. Взгляни, пожалуйста ! https://alligator.io/vuejs/events/