Add a click handler to a ref?

Question

I'm using a 3rd party package but need to add a small piece of interaction.

The package has a button with ref of "next". Is there anyway to add a click handler to this ref?

Answer 1

This may help:

public mounted() {
    const next = this.$refs.next as HTMLElement;
    next.addEventListener('click', this.onNextClick, false);
}

public onNextClick() {
    // do your stuff here
}

Answer 2

I've ran into this question seeking a solution for a similar problem. However my case was that a ref attribute was set on a Vue Component object. Using simple addEventListener on a referenced object I got an error:

addEventListener is not a function

The solution is to call the function on referenced component's $el property, being an actual HTML element.

this.$refs.next.$el.addEventListener('click', function() {
  /* do stuff here*/
}, false);

From the comment's in the previous answers I see that it might also be the case for OP.