每个按钮点击只能运行一次javascript函数

Question

我使用vue.js来处理一些按钮点击并运行一个方法。因此，像

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button>

按钮将运行这个方法就好了：

photo: function(){ 

    if(vm.photoButton == 'Next, Declare Your Goal') 
    { 
     photoUpload();     
    } else { 
     sliderSignup.unslider('next'); 
    } 

} 

麻烦的是双击可以运行sliderSignup.unslider('next');两次跳过两个幻灯片，也不好。我知道有jQuery功能.one()你可以使用一个按钮点击，但我使用Vue。我怎样才能每10秒只运行一次这样的功能，因此你不能双击实时快速？我看了很多，只看到通过jquery的$('#element').one('click' function(){})选项，这将不会为我工作。

Answer 1

根据Vue Event-Modifiers你可以使用：。一旦

更改您的代码从：

<button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button> 

到：

<button id="signup-photo-button" v-on:click.once="photo">{{ photoButton }}</button> 

随着Vue的版本1，你可以使用一个变量像：

new Vue({ 
 
    el: '#example-2', 
 
    data: { 
 
    isAlreadyClicked: true, 
 
    photoButton: 'button demo' 
 
    }, 
 
    methods: { 
 
    photo: function (event) { 
 
     if (this.isAlreadyClicked) { 
 
     this.isAlreadyClicked = false; 
 
     console.log('do your stuff'); 
 
     } else { 
 
     console.log('already clicked. Do nothing'); 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script> 
 

 
<div id="example-2"> 
 
    <button id="signup-photo-button" v-on:click="photo">{{ photoButton }}</button> 
 
</div>

Answer 2

继@baao想法

photo: function(){ 

     if(vm.photoButton == 'Next, Declare Your Goal') 
     { 
      photoUpload();     
     } else { 
      document.getElementById('signup-photo-button').disabled = true; 
      setTimeout(function() { 
       document.getElementById('signup-photo-button').disabled = false; 
    } 
,10000); 
      sliderSignup.unslider('next'); 
     } 
    }