Skip to content
Advertisement

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.

Advertisement

Answer

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/

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement