[Vuejs]-Javascript run function only once per button click

by

0👍

✅

According to Vue Event-Modifiers you can use: .once

Change your code from:

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

to:

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

With Vue version 1 you may use a variable like in:

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>

0👍

Following @baao idea

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

Leave a comment