Linking Vue.js in an anchor tag

Question

Linking Vue.js in an anchor tag

Is there a way to properly link to another page using vue 2? I have a bootstrap table with rows that need to navigate to different pages. How can this be achieved? If I try to implement it like this:

<tr @click="url(forum)">data</tr>

url(forum) {
  window.location.href = '/berichten/' + forum.slug;    
}

I am unable to include another @click in the same row, as shown below:

<td @click="destroy(forum)">forum</td>

NOTE: I do not use Vue.js router.

Any assistance on this issue would be greatly appreciated.

--EDIT--

Upon clicking on the

<td @click="destroy(forum)">

, it redirects to the url(forum); function instead of executing my destroy(forum) function.

javascript vue.js

Answer 1

Answer №1

To prevent the propagation of events in your nested click handler, make use of the ".stop" modifier:

<td @click.stop="destroy(forum)">forum</td>

Check out this demo (non-Vue.js):

https://jsfiddle.net/atesgoral/xgn92eb0/

Answer 2

To prevent the propagation of events in your nested click handler, make use of the ".stop" modifier:

<td @click.stop="destroy(forum)">forum</td>

Check out this demo (non-Vue.js):

https://jsfiddle.net/atesgoral/xgn92eb0/

Answer 3

Answer №2

To prevent the click event from bubbling up to the tr, you can alter your td click declaration by adding .stop.

Here's how you can modify it:

<td @click.stop="delete(forum)">forum</td>

Answer 4

To prevent the click event from bubbling up to the tr, you can alter your td click declaration by adding .stop.

Here's how you can modify it:

<td @click.stop="delete(forum)">forum</td>

Linking Vue.js in an anchor tag

Answer №1

Answer №2

Similar questions

Merging and sorting a two-dimensional array in JavaScript

What exactly is the purpose of the colon in JavaScript's import statement?

Click on a link to open it in the current tab with customized headers

Can you explain the convention for boolean parameters in JavaScript or React?

The importance of variables in Express Routing

What is the best way to achieve a partial match using JQuery?

Can CSS be used to automatically focus on a div element?

What is the best way to verify a user's login status in AngularJS using $routeChangeStart event?

Is there a way to verify if a button has been clicked in node.js?

Tips for implementing a dynamic value in the ng-style based on certain conditions

What is the best method for comparing two elements effectively in JavaScript?

Tips for splitting the json_encode output in Javascript

Sort by user identifier

The second tab on Bootstrap5's tab content feature seems to generate an endless amount of white

Obtain the model value using Yii jQuery and then proceed to submit the form

JavaScript not functioning properly on mobile platform

Achieve a customized glow effect by blending FragColor with UnrealBloom in ThreeJS using GLSL

Load CSS stylesheet depending on Internet Explorer document mode

Guide on retrieving the innerHTML of all <a> tags within a specific span class

Troubleshooting NodeJS Socket.io-client connectivity issue: experiencing a lack of