Is it possible to trigger events using Vue.js?

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.

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.