[Vuejs]-Vue 3 router link inside a clickable table row

by

0👍

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

Leave a comment