Press and Hold Counter in Vue.js

I keep seeing this counters everywhere while installing these frontend framework starter kit packages.

You know what I’m talking about — you’re looking at one in the picture above.

Anyway.

I was starting to think — “you know I wish you could press it down to start the count and then stop as you release the mouse button.”

Were you feeling the same way?

Don’t lie!

So my immediate next thought was — you guessed it: setInterval()

Okay, but first let’s set up our Vite+Vue 3 starter kit.

npx create-vite-app <project name>
cd <project name>
npm install
npm run dev

Fire up your browser, point it to localhost:3000 or whatever you configured it to, and you should see some variation of this:

Well done. You’re a champion…of setting up framework starter kits.

Chloe is super impressed. right?

So, let’s jump into it.

We need a couple events to hook into first.

We’ll re-write our button template to listen for our new events and pass some painfully lazily-named methods to our Vue event handling:

<button @mousedown="mousedown" @mouseup="mouseup">
   count is: {{ count }}
</button>

Now we need to define the mousedown method, the mouseup method, and another helper function to count for us.

<script>
export default {
data() {
  return {
    count: 0,
    interval: null,
  };
},
methods: {
    mousedown() {
      this.increment()
      this.interval = setInterval(this.increment, 500);
    },
    mouseup() {
      clearInterval(this.interval);
    },
    increment() {
      this.count = this.count + 1;
    },
  },
};
</script>

Save that bugger and take it for a drive! You’ve earned it!