How to preventDefault() in Vuejs?

Question

I am building a timer and I have set the following as default values in data:

data: () => {
  return {
    hour: 0;
    min: 0;
    sec: 0;
  }
}

Then I have set the following function to trigger the timer:

methods: {
  startTimer: function () {
      var self = this;
      if (self.hour !== 0 && self.min !== 0 && self.sec !== 0) {
        preventDefault();
      } else {
        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          self.hour = Math.floor(self.totalSeconds / 3600);
          self.min = Math.floor((self.totalSeconds / 60) % 60);
          self.sec = parseInt(self.totalSeconds % 60);
        }, 1000);
      }
    },
}

Now, whenever I trigger the timer with a button <div @click="startTimer()">add timer</div> by spamming it, the seconds would jump very fast as if two or three timers running concurrently (which I think it is). I want to set preventDefault() but it doesn't seem to work. Any ideas on how to turn off the button if the hour, mins and seconds are all = 0?

Boussadjra Brahim · Accepted Answer · 2021-08-19 04:23:41Z

2

Try to get the click event from the method :

methods: {
  startTimer: function (event) {
      var self = this;
      if (self.hour !== 0 && self.min !== 0 && self.sec !== 0) {
        event.preventDefault();
      } else {
 ...

and you shouldn't use the () in the template in order to get the event passed as parameter :

<div @click="startTimer">add timer</div

or pass $event as parameter :

<div @click="startTimer($event)">add timer</div

edited Aug 19, 2021 at 4:23

answered Aug 19, 2021 at 3:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Beaumont Over a year ago

It doesn't work with "event.preventDefault();" I have used the () in the template because I have to execute 2 functions within the v-bind click - apparently it wouldn't work if I don't include () within the template. The only solution I have is to set the state as true and toggle the button with v-if by changing it to false after pressing the button, but that doesn't seem like a solution, more like a work around.

Boussadjra Brahim Over a year ago

Try out @click="startTimer($event)"

Beaumont Over a year ago

Actually it worked now with ($event) after I have reloaded localhost. Thank you!

tony19 · Accepted Answer · 2022-07-16 03:04:08Z

1

call the function without the parenthesis ()

<div @click="startTimer">add timer</div

And then in the startTime function the event will automatically be injected by vuejs which you can use to preventDefault.

methods: {
  startTimer: function (event) {
      var self = this;
      if (self.hour !== 0 && self.min !== 0 && self.sec !== 0) {
        event.preventDefault();
      } else {
        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          self.hour = Math.floor(self.totalSeconds / 3600);
          self.min = Math.floor((self.totalSeconds / 60) % 60);
          self.sec = parseInt(self.totalSeconds % 60);
        }, 1000);
      }
    },
}

More information

edited Jul 16, 2022 at 3:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 19, 2021 at 3:45

Salvino D'sa

4,5761 gold badge14 silver badges26 bronze badges

2 Comments

Beaumont Over a year ago

Thanks for the help, I have followed @Boussadjra's suggestion on adding @click="startTimer($event) and it worked.

Salvino D'sa Over a year ago

Actually, as per the documentation there's absolutely no need to do it manually. Event should always be injected by vuejs. Please have a look at the documentation on best practices, as I'm sure that approach will cause issue for you in future. Nevertheless, you are free to use the approach you are comfortable with. Thanks

Collectives™ on Stack Overflow

How to preventDefault() in Vuejs?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related