Vue.js: How can I trigger one function with multiple events on the same element?

Question

I'm learning Vue and I want to bind multipe events to a single function in the same element, something like the following (in plain JavaScript, feel free to run the code snippet):

let mainElement = document.querySelector("h1");

// I made an 'events' array to loop
["click", "mouseenter", "And we can keep adding events..."]
.forEach( event => {
    mainElement.addEventListener(event, myFunction);
  }
);

function myFunction() {
  // DO SOMETHING, for example:
  mainElement.style.color = "red";
}

const resetButton = document
.querySelector("button")
.addEventListener("click", () => {
  mainElement.style.color = "black";
});

<h1 style="color: black">This is the element we want to control</h1>

<button>Reset</button>

In Vue.js I can bind ONE SINGLE EVENT directly to an element like this:

<h1 @mouseenter="myFunction">This is the element we want to control</h1>

I want to know if there is a way to bind MULTIPLE EVENTS to a single function inside the same element, does anyone know if there is a syntax like this?

<h1 @[mouseenter,click,mouseleave...]="myFunction">This is the element we want to control</h1>

Codeaur · Accepted Answer · 2021-01-22 08:38:36Z

2

You can do something like this if I am still correct.

<h1 v-on="handlers">This is the element we want to control</h1>

// ...

data() {
  const vm = this;

  return {
    handlers: {
      mousedown: vm.myFunction,
      touchstart: vm.myFunction
    }
  }
},

function myFunction() {
  // DO SOMETHING, for example:
  mainElement.style.color = "red";
}

haven't done vue in a long time, but if I am correct this still should work.

answered Jan 22, 2021 at 8:38

Codeaur

1352 silver badges9 bronze badges

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

5 Comments

Kenji Emura Over a year ago

Thanks for your response!, By the way, can I ask what version of Vue does that syntax belong to? I'm learning the version 3 and so far, I haven't seen a "const vm = this" declaration, thanks!

Codeaur Over a year ago

I think I wrote this last time in vue2. Haven't used vue in a long time. And the "const vm = this" is just to make sure we still use the same this element. There are many opinions about writing it like that, because some will allow it and some say it is not best practice. Personally if it works it is all right ;)

Kenji Emura Over a year ago

It worked! I didn't need to declare the "const vm = this", just used "this" directly. On the other hand, is there a way to use the "@" in this syntax? I tried to do it like the following but it didn't work: <h1 @"handlers">This is the element we want to control</h1>

Codeaur Over a year ago

Great! That is good to know for the future that "const vm = this" is not needed anymore. If i am correct then is the @ == v-on so v-on:click becomes @click. I don't know if it would work if you use @ instead of v-on (so you have @="handlers"). If that is not possible then I fear that I don't know how to do that.

Codeaur Over a year ago

I wrote it like that because of some problems with this, but it is some older code. Probably now would do more research if I could prevent it somehow in the situation I was in. But agree if not needed then don't do it.

Collectives™ on Stack Overflow

Vue.js: How can I trigger one function with multiple events on the same element?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related