ボタンを1回だけクリックすると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'); 
    } 

} 

トラブルは二度2枚のスライド、良くないをスキップsliderSignup.unslider('next');を実行することができますダブルクリックです。私はjquery関数.one()があることを知っていますが、ボタンをクリックするだけで使用できますが、私はVueを使用します。私はこの機能を1回だけ実行することができますか、または10秒ごとに1回好きなので、実際にダブルクリックすることはできません。私は多くを見て、私のために働かない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では

がからあなたのコードを変更し

.once：

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