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

Passing an undefined query param can prevent the url from updating #2641

Open
cvn opened this Issue Mar 5, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@cvn
Copy link

cvn commented Mar 5, 2019

Version

3.0.2

Reproduction link

https://plnkr.co/edit/yJJpcKuhYQwdOk3nZcZs?p=preview

Steps to reproduce

  1. Start with the url /?q=foo&color=bar.
  2. this.$router.push({query: {q: 'foo', offset: undefined}})

What is expected?

I expect the url to change to /?q=foo

What is actually happening?

The url does not change


I'm doing search filtering using query params. Every time I change a filter, I
add/remove/modify the appropriate param, and reset my pagination by setting
an offset param to undefined. In my app, the combination of removing a param
and offset not being set to begin with, causes the route not to update.

This issue is easy enough to work around, but it took me a while to figure out
what was going on.

@posva

This comment has been minimized.

Copy link
Member

posva commented Mar 5, 2019

For the moment the way to do it is to remove the property from the object (instead of providing undefined). The thing is it is kept in $route.query which shouldn't in order to be consistent when coming directly by entering the url

Technically, removing the query parameters would be a breaking change so I will keep this open for next major version

@posva posva added the improvement label Mar 5, 2019

@cvn

This comment has been minimized.

Copy link
Author

cvn commented Mar 5, 2019

@posva To be clear, using undefined to remove a query parameter already works:

  1. Start with /?q=foo
  2. this.$router.push({query: {q: undefined}})
  3. The url changes to /

Using undefined only fails in some circumstances.

@posva

This comment has been minimized.

Copy link
Member

posva commented Mar 5, 2019

I'm talking about this, these are how the tests should be written: undefined values should be removed from resulting query object

 it('should work consistently', () => {
    router.push({ query: { bar: 'bar' } })
    router.push({ query: { bar: undefined } })
    expect(location.hash).toEqual('#/')
    expect(router.app.$route.query).toEqual({ })
  })
it('should support the example use case', () => {
    router.push({ query: { q: 'foo', color: 'bar' } })
    router.push({ query: { q: 'foo', color: undefined } })
    expect(location.hash).toEqual('#/?q=foo')
    expect(router.app.$route.query).toEqual({ q: 'foo' })
  })

Technically it would be a breaking change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.