1

So, I got a table with <tr>s which are clickable. And inside a <td> a link:

<tr
  @click="editPlatform(platform.id)"
  v-for="platform in platforms"
  :key="'platform_table_' + platform.id"
>
  <td>{{ platform.id }}</td>
  <td>Many more tds</td>
  <td>
    <router-link
            :to="{ name: 'platformUsers', params: {id: platform.id} }">
    {{ platform.users.length }}
    </router-link>
  </td>
</tr>

methods: {
  editPlatform(id) {
    this.$router.push({ name: 'editPlatform', params: { id: id } });
  },
}

And the <router-link> event seems to bubble through. The url changes to the platformUsers for a millisecond but then the editPlatform(id) is also triggered and it goes there.

I tried <router-link @click.native.prevent="editPlatform(platform.id)" ...> and style="pointer-events: none;"on the router-link - but they don't work either.

Any idea beside setting the "@click" on each td - beside the one with the link?

doğukan
  • 23,073
  • 13
  • 57
  • 69
bibamann
  • 2,469
  • 1
  • 11
  • 9
  • In my case I wanted to prevent click on the `tr` from a `table` when I clicking in an ' href` without a method. I used `.self` in the ' td` and moved the method from the `tr' to each `td`. Check it out: https://stackoverflow.com/questions/68838076/how-to-ignore-that-clicking-on-a-td-tag-does-not-automatically-redirect-me-to-an/74465289#74465289 – JotaPardo Nov 16 '22 at 18:13

1 Answers1

2

stop and prevent modifiers aren't the same! This should work

 @click.stop="editPlatform(platform.id)"

See docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

tony19
  • 125,647
  • 18
  • 229
  • 307
sandrooco
  • 8,016
  • 9
  • 48
  • 86
  • Great, please mark as solved @bibamann – sandrooco May 28 '21 at 11:08
  • already marked as duplicate - but the @click.stop (no = ... needed) needs to be put on the "td" above, not the router-link. otherwise the page reloads and doesn't have the single-page behaviour. Maybe not mark it as "duplicate" :D – bibamann May 31 '21 at 13:48
  • Okay, got it thx. Wasn't me who marked as duplicate though. :) – sandrooco May 31 '21 at 13:55