Stopping the Browser from Redirecting to Href Links and Only Triggering the @Click Method in Vue.js

Question

Stopping the Browser from Redirecting to Href Links and Only Triggering the @Click Method in Vue.js

In my application, there is a link set up like this:

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

Currently, when the link is clicked, the browser follows the href link and also executes the "openThread" method. I want to maintain the link so that users can see where it will take them, but I don't want the browser to actually follow the link (I open a lightbox instead and change the URL with pushState). I only want it to trigger the specified method.

Is there a way to achieve this? Thank you!

javascript url vue.js preventdefault

Answer 1

Answer №1

If you need to prevent the default action of a click event in Vue.js, you can use the .prevent modifier.

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

Answer 2

If you need to prevent the default action of a click event in Vue.js, you can use the .prevent modifier.

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

Answer 3

Answer №2

Check out Event Handling in the Vue.js guide:

Event Modifiers

Many times, we need to use event.preventDefault() or event.stopPropagation() within event handlers. While we can achieve this with methods, it's ideal for methods to focus solely on data logic rather than DOM event specifics.

To solve this issue, Vue offers event modifiers for v-on. Remember that modifiers are directive suffixes indicated by a dot.

.stop
.prevent
.capture
.self
.once
.passive

So, you can do this:

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

...or simply handle the event parameter and call preventDefault.

View Live Example on jsFiddle (Stack Snippets don't support external links).

Answer 4

Check out Event Handling in the Vue.js guide:

Event Modifiers

Many times, we need to use event.preventDefault() or event.stopPropagation() within event handlers. While we can achieve this with methods, it's ideal for methods to focus solely on data logic rather than DOM event specifics.

To solve this issue, Vue offers event modifiers for v-on. Remember that modifiers are directive suffixes indicated by a dot.

.stop
.prevent
.capture
.self
.once
.passive

So, you can do this:

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

...or simply handle the event parameter and call preventDefault.

View Live Example on jsFiddle (Stack Snippets don't support external links).

Answer 5

Answer №3

For those who may require the use of vue router, here is a handy solution:

<router-link
  :to="{ name: 'routeName' }"
  :event="''"
  @click="functionName"
>

Quoted from vue-router Git issue.

Answer 6

For those who may require the use of vue router, here is a handy solution:

<router-link
  :to="{ name: 'routeName' }"
  :event="''"
  @click="functionName"
>

Quoted from vue-router Git issue.

Stopping the Browser from Redirecting to Href Links and Only Triggering the @Click Method in Vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Vue.js to place a marker on a PDF document and store its position

What is the reasoning behind the React tutorial's suggestion to store child Component states within the parent Component?

Having trouble with Socket.io sending data to a specific socketId?

Having trouble getting the jQuery/JS redirect button to function properly

The ForEach function does not execute actions on every individual object, but rather only once

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Is there a way for me to move to the next row while navigating to the right using the keyCode function?

React-select: The default values will only be updated if they are initially set statically

How can I efficiently pass a JavaScript object to a function using jQuery syntax?

Ensuring that the desired DOM elements have loaded before attempting to manipulate them in Vue.js

Disable all components on the web page using the Wicket DisableComponentListener

Use the filter method to sort through an array of objects by using another array

Is it necessary for a component to disconnect from the socket io server upon unmounting?

Utilize the power of jQuery's AJAX capabilities

Encountering a problem with fetching data in a dropdown using a hidden select in MVC 4 Razor and Selectpicker

What's stopping me from installing the npm stripe checkout package?

Filter JavaScript elements by conditions and true/false values

Retrieve all data from the 'belongsToMany' table where a particular record is included in the list

Populate an HTML table using a JavaScript array containing objects

How to manipulate iframe elements using jQuery or JavaScript