停止多次點擊vue.js

在我的vue.js應用程序中，可以刪除項目。停止多次點擊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.因此，如果用戶點擊一次，該按鈕應該被禁用。

- 編輯 -

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>

來源

2016-09-21 Jamie

我建議在數據屬性中存儲異步請求的狀態（例如'processing：false'，當用戶單擊元素時，將其設置爲'true'），然後在'delete （）'方法檢查狀態以繼續或停止代碼。最後，重置成功/失敗處理程序中的狀態。 –

你能舉個例子嗎？ – Jamie

剛剛發佈了一個示例:) –

我建議存儲在數據屬性異步請求的狀態（例如處理：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>

來源

2016-09-21 16:57:10

真棒解決方案。但由於某些原因，處理在我的vue.js應用程序中沒有改變。我已經記錄了這個問題：https：//drive.google.com/file/d/0ByeuR1N3nhXId1o3X1JPNUZIaWs/view在編輯2上面我已經把我的當前代碼與你的想法。這裏有什麼可能是錯的？感謝您的幫助。 – Jamie

@Jamie看起來'處理器'被重新分配得太早了 - 在承諾成功/失敗處理程序之外。注意在'.then（）'之外的'this.processing = false'。嘗試刪除該行並將其放在'.then（）'或'.catch（）'方法內的錯誤處理程序中。 –

你是最棒的。謝謝你的時間！ – Jamie

-1

試試這個

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

來源

2016-09-21 10:14:01 Sujithrao

不幸的是無法正常工作。 – Jamie

試試這個

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

來源

2016-09-21 10:59:05

感謝您的回覆。但由於某些原因，在if語句之後，this.deleting不會變爲true！什麼可能是錯的。我現在正在尋找更多1小時的時間，但無法解決問題！請在上面的編輯部分查看我的代碼。會真的很感激！ – Jamie

如果有任何人仍然遭受@單擊運行方法很多次， @ click.once只運行方法一次。我用這個來解決「登錄」問題。因爲如果我多次點擊該按鈕，它會多次將URL推到例如:) localhost：8000/admin/oms/admin/oms/admin/oms

這裏有很好的文檔。請看一下！ https://alligator.io/vuejs/events/

來源

2017-08-30 14:39:47 Jenam

停止多次點擊vue.js

回答

相關問題