Is it possible to trigger events using Vue.js?

Question

I have just started using Vue.js and find myself continuously turning to jQuery to help in certain situations. Most recently I have attempted to, unsuccessfully "trigger" (or emulate) an event, such as an on click or blur event.

I know in jQuery you can do the following:

$('#my-selector').trigger('click'); 

But how can this be acheived using Vue.js? I am wanting to move away from using jQuery as much as possible.

Take the below as an example:

<div id="my-scope">     <button type="button" v-on="click: myClickEvent">Click Me!</button> </div>  <script> new Vue({     el: "#my-scope",     data: {         foo: "Hello World"     },     methods: {         myClickEvent: function(e) {             console.log(e.targetVM);             alert(this.foo);         },         anotherRandomFunciton: function() {             this.myClickEvent();         }     } }); </script> 

If I was to call anotherRandomFunciton, I would like it to emulate (or trigger) the above click event. However, I attempt this the event (or e in the above example) never gets passed to the function.

Does Vue.js have a method for achieving this?

Answer 1

You need to get a reference to your button by using v-el like so:

<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button> 

Then, in your method:

function anotherRandomFunction() {     var elem = this.$els.myBtn     elem.click() } 

It's just a native DOM click event. See v-el Documentation

Or since Vue 2.x:

<template>     <button type="button" @click="myClickEvent" ref="myBtn">         Click Me!     </button> </template>  <script> export default {     methods: {         myClickEvent($event) {             const elem = this.$refs.myBtn             elem.click()         }     } } </script> 

Since Vue uses and listens for native DOM events only. You can trigger native DOM events using the Element#dispatchEvent like so:

var elem = this.$els.myBtn; // Element to fire on  var prevented = elem.dispatchEvent(new Event("change")); // Fire event  if (prevented) {} // A handler used event.preventDefault(); 

This is not exactly ideal or best practice. Ideally, you should have a function that handles the internals and an event handler that calls that function. That way, you can call the internals whenever you need to.