Search code examples
javascripturlvue.jspreventdefault

Vue.js: How to prevent browser from going to href link and instead only execute the @click method?

So I have a link in my application like this:

<a href="/threads/my-first-thread/" @click="openThread">My first thread</a>

At the moment, when I click the link, the browsers follows the href link and also executes the "openThread" method. I want to keep the link in there so that it shows the user where a click is going to bring him to, but I don't want the browser to actually follow the link (I open a lightbox instead and change the url with pushState). I want it to only execute the given method.

Is there any way to do this? Thanks!

Solution

  • You are looking for .prevent modifer.

    <a href="/threads/my-first-thread/" @click.prevent="openThread">My first thread</a>