How to bind a click event to a button when component is mounted vue js?

I am using a third party app (vue slick carousel) and I need to bind a click event to below button

<button type="button" data-role="none" class="slick-arrow slick-next" style="display: block;">      <svg...</svg>  </button>  

So everytime I click this button a function gets triggered. This is what I tried in mounted and created life cycle, but didn't bind click event to it.

// console.log(document.querySelector(".slick-next")); // this returns element stated above    document.querySelector(".slick-next").addEventListener("click", () => {    console.log("Works");  });  

I tried using setAttribute hoped it works, but it didn't work either.

Any help is appreciated. Thank you in advance.

https://stackoverflow.com/questions/66715178/how-to-bind-a-click-event-to-a-button-when-component-is-mounted-vue-js March 20, 2021 at 04:26AM