Is it possible to trigger events using Vue.js?

Solution 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.

Solution 2:

If someone stumbles upon this, this is how I did it:

When using this.$refs.myBtn.click()

I get

“Uncaught TypeError: this.$refs.myBtn.click is not a function”

Changed it to: this.$refs.myBtn.$el.click()

To be clear: “$el” needs to be added for it to work.