Vue 3 router link inside a clickable table row

Question

Simple question. I have a router link inside a clickable table row. when I click the router link it triggers the @click event instead of triggering the router-link.

How can I fix this?

<tr v-for="(blabla, index) in data" @click="goToIssue(blabla.id)">
  <td>{{ blabla.id }}</td>
  <td>{{ blabla.username }}</td>
  <td>{{ blabla.name }}</td>
  <td>
    <router-link 
      :to="'/project' + blabla.project.id"
    >
      Details
    </router-link>                     
  </td>                    
</tr>

Answer 1

To stop the click-event from bubbling to the parent, use a custom <router-link> that uses the stop event modifier on the underlying link's @click:

1. Apply the custom prop on the <router-link>.

2. In the <router-link>'s default slot, add an <a> with its href bound to the slot's href prop.

3. Also add a click-event handler that calls the slot's navigate prop (a function that navigates to <router-link>'s to prop). Also apply the .stop event modifier to the click-event listener to stop the event from propagating to the parent elements.

<router-link :to="'/project/' + blabla.project.id"
             custom 1️⃣
             v-slot="{ navigate, href }">
  <a :href="href" 2️⃣
     @click.stop="navigate" 3️⃣
  >
    Details
  </a>
</router-link>

demo