Arms crossed picture of James Auble
screenshot of demo

Press and Hold Counter in Vue.js

PublishedApr 20th, 2021

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?

woman raising eyebrows

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:

screenshot of starter homepage

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

mime of little girl looking really uncomfortable

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 methodthe 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!

Need a web developer?

Contact Me
Back to Blog
Scrolldown Icon