CODEWITHSUNDEEP
javascriptvue.js
Jamie
Jamie

Reputation: 10886

Vue.js link in a tag

How do I link properly to another page with vue 2 ? I have a bootstrap table and every row has to link somewhere else how could I do this? If I do it like this:

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

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

I can't add another @click in that row like this:

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

NOTE: I do not use Vue.js router.

Any help would be much appreciated

--EDIT--

When I click on the <td @click="destroy(forum)"> it goes to the url(forum); function instead of my destroy(forum) function.

Upvotes: 1

Views: 1080

Answers (2)

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140050

Prevent event propagation on your nested click handler by using the ".stop" modifier:

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

Demo (non-Vue.js):

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

Upvotes: 3

Justin MacArthur
Justin MacArthur

Reputation: 4050

Try modifying your td click declaration to have .stop so that the click event isn't bubbled up to the tr

It would look like this:

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

Upvotes: 1

Related Questions