标签中的Vue.js链接

Question

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.

Answer 1

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/

Answer 2

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>