Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RouterLink click.native handler stops being called after page rerender #12781

Open
youngpirate32 opened this issue Sep 14, 2022 · 7 comments · May be fixed by #13022
Open

RouterLink click.native handler stops being called after page rerender #12781

youngpirate32 opened this issue Sep 14, 2022 · 7 comments · May be fixed by #13022

Comments

@youngpirate32
Copy link

Version

2.7.10

Reproduction link

codesandbox.io

Steps to reproduce

  1. Click link "Go about"
  2. See in console "on click"
  3. Click link "Go home"
  4. Click link "Go about"

What is expected?

The console will "on click" twice

What is actually happening?

In the console "on click" 1 time

@youngpirate32
Copy link
Author

youngpirate32 commented Sep 14, 2022

If load page async (https://codesandbox.io/s/angry-sun-y90on7?file=/src/main.js), then handler is never called

@nieyuyao
Copy link

nieyuyao commented Sep 25, 2022

You can use span as slot for router-link and bind click handler to it.

@yyx990803
Copy link
Member

Are you only able to reproduce this with RouterLink and not any other component?

@youngpirate32
Copy link
Author

Only RouterLink

@seriouslysean
Copy link

seriouslysean commented Feb 8, 2023

For what it's worth, I put together a reproduction in the Nuxt issue here, nuxt/nuxt#10593 (comment).

I also went through the changes and confirmed this was working as intended on Vue 2.6.14 with both Vue Router versions (3.5.1 and 3.6.5) , then broken in Vue 2.7.14 with both versions so I don't think this is tied to a Vue Router change.

That said, there is documentation on the proper way to utilize a router-link that does fix the issue, see https://v3.router.vuejs.org/api/#v-slot-api-3-1-0.

Taking your example, @youngpirate32, here's a working version with the slot approach, https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-hzr4u4?file=/src/views/AboutView.vue. This also fixes the async version, https://codesandbox.io/s/nuxt-2-vue-2-7-click-event-bug-async-mqb3o3?file=/src/views/HomeView.vue.

@yyx990803 though this does fix the issue, I'm still curious why the order of operation of click events previously supported @click natively on the router-link, and now no longer does. I wouldn't be surprised if this was just a case of optimization.

All that to say that there is a valid, documented approach here that works to fix the issue, so this may not be a bug at all. Hope this helps!

@1001v
Copy link

1001v commented Jul 23, 2024

Hello. Is there any chance for it to be fixed? This is a huge regression actually, and the suggested workaround is not always suitable. Thank you.

@manhdinh141
Copy link

Vue.directive('click', {
  bind (el, binding) {
    el.addEventListener('click', binding.value)
  },
  unbind (el, binding) {
    el.removeEventListener('click', binding.value)
  }
})


nuxt-link(:to="..." v-click="doAnyThing")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants