Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Vue @mouse-down event not come

I am new to webdevelopment and I am dealing problems with vue. From tutorial I learned that it is possible to use @click when button is pressed. It works fine.

Now I want to make simple measurement that mouse is down and up for further development of double-click and long press detector (I also found out that it is possible to use @double-click but due to unknown reason it is also not working). Can you please explain me what I am doing wrong?

NOTE: I know that there are many packages which deals it but I want to keep it simple if possible.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<script>
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    greet(event) {
      this.counter = 2
    }
  }
}
</script>

<template>
  <button @mouse-down="greet">Greet {{ counter }}</button>
</template>

>Solution :

The event name is "@mousedown" not "@mouse-down"

<button @mousedown="greet">Greet {{ counter }}</button>

But be careful with this event. It handles all mouse buttons (left, middle, right) and called when you downed any of these buttons.

To handle only one button down event you should to use ".left" or ".right" modifier.

For example:

<button @mousedown.left="greet">Greet {{ counter }}</button>

It will handle only when left button downed.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading