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

watcher for a route param is called when a user leaved the route #2291

Closed
yamacent opened this issue Oct 2, 2020 · 9 comments
Closed

watcher for a route param is called when a user leaved the route #2291

yamacent opened this issue Oct 2, 2020 · 9 comments
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@yamacent
Copy link

yamacent commented Oct 2, 2020

Version

3.0.0

Reproduction link

https://jsfiddle.net/posva/yvegmca7/

SFC (no vue router)

Steps to reproduce

  1. click foo1 link in result tab
  2. click bar link in result tab
  3. "fetch foo: ", undefined will be shown in console

same code with Vue v2.x do not show "fetch foo: ", undefined.
https://jsfiddle.net/s74dutkm/1/

What is expected?

watcher for a route param is not called when a user leaved the route (same as v2)

What is actually happening?

watcher for a route param is called when a user leaved the route (watcher gets undefined as the route param)


it may be caused by this breaking change.

I don't think it's natural that we need to consider the possibility a route param is undefined in a route which requires the param.

@posva posva marked this as a duplicate of #2200 Oct 2, 2020
@posva posva closed this as completed Oct 2, 2020
@posva posva reopened this Oct 2, 2020
@posva
Copy link
Member

posva commented Oct 2, 2020

This is a regression of #1603

@posva posva added the 🐞 bug Something isn't working label Oct 2, 2020
@posva posva marked this as not a duplicate of #2200 Oct 2, 2020
@yyx990803
Copy link
Member

As a workaround, use a post flush watcher:

watch: {
  "$route.params.fooId": {
    handler: "fetch",
    flush: "post"
  }
}

@henribru
Copy link

Are there any plans to fix this issue? The workaround works okay for your own watchers, but I'm running into this with watchers in external libraries as well, in which case I can't affect how they flush.

@johannesstricker
Copy link

Looks like this still isn't fixed, am I right? Any plans to fix this?

@zenflow
Copy link

zenflow commented Jun 14, 2022

As a workaround, use a post flush watcher:

watch: {
  "$route.params.fooId": {
    handler: "fetch",
    flush: "post"
  }
}

@yyx990803 Does flush: "post" restore vue2 behavior? Or how does that compare to vue2 behavior? I can't find much documentation on this breaking change.. thanks for any insight you can give!

@Akryum
Copy link
Member

Akryum commented Jul 27, 2022

Looks like Vue 2.7 has the same issue

@acnowland
Copy link

acnowland commented May 12, 2023

This does not seem to have been resolved, is there plans to resolve this? I realize there is this workaround but in a large application this is a fairly breaking change.

@LunarLambda
Copy link

It was fixed in 78c199d, it seems like? The jsfiddle production link (which gets the latest version of vue via unpkg) in the issue description no longer shows the described behaviour

@henribru
Copy link

#7030 seems like essentially the same issue to me and it links a reproduction where this still occurs.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 10, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

9 participants