71

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?

4
  • 1
    Are you okay with using plain javascript?
    – Luminous
    Aug 10, 2015 at 11:15
  • I guess so, but if that's the case I may as well just use jQuery. I just though there may have been a better way to do this using Vue.js
    – Nick Law
    Aug 10, 2015 at 11:19
  • 1
    Did you check out the instance methods? You're able to call events there and listen to events in a more jQuery fashion. vuejs.org/api/instance-methods.html
    – Luminous
    Aug 10, 2015 at 11:27
  • You're trying to simulate a click event though so that link probably won't help either.
    – Luminous
    Aug 10, 2015 at 11:32

3 Answers 3

88

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.

1
42

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.

6
  • 1
    I think this might depend on your code and/or version of Vue. this.$refs.filterGroupLegend.click() works for me with 2.5.16. Jun 14, 2018 at 22:20
  • 4
    @the_dude_abides It depends if you're handling the click on a component or a native DOM element. Use $el for native elements. Side note, sweet handle maan
    – James
    Nov 29, 2018 at 22:47
  • 3
    Thanks @james.brndwgn ! Nov 30, 2018 at 23:13
  • i was trying to trigger @remove event for a component, this.$refs.pictureInput.remove() shows error saying it is not a function as you said, so when using this.$refs.pictureInput.$el.remove() it calls the native remove() i guess and removes the element from the view. any suggestions to avoid this? Feb 7, 2019 at 7:41
  • okay, so i was trying to invoke a method call actually, and the name of the method was wrong, my bad! after getting the name right, it worked. Feb 8, 2019 at 14:17
-8

Vue is by its nature narrowly focused – it is intended that other packages like jQuery (EDIT: for jQuery features other than DOM manipulation) to be used with it. I think using jQuery's trigger is just fine.

However, if you want to create your own events without jQuery, check out dispatchEvent:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Or, for the particular case of click, there is a method on DOM elements you can use:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

5
  • 11
    I don't think this statement is true... >it is intended that other packages like jQuery be used with it
    – Grant
    Jun 15, 2018 at 15:04
  • @Grant from the perspective that you only want Vue modifying the DOM, you are correct. But generally speaking, Vue has a pretty narrow focus and it is easy to incorporate other packages such as Sortable.js so you end up with something like Vue.Draggable. Jun 15, 2018 at 17:55
  • 6
    This answer is absolutely wrong. Vue is meant to replace jquery. Using jquery with vue is a hack at best, and is absolutely bad practice. Feb 9, 2019 at 6:31
  • 4
    Vue is not meant to replace jQuery. Vue is meant to replace direct DOM manipulation. jQuery can be used for more than DOM manipulation. Feb 11, 2019 at 2:37
  • 2
    Absolutely not - Using jQuery with any modern SPA JS Framework is a pretty fair indication that you're not using the framework properly. Jun 30, 2020 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.