Skip to content

feat: add component watchParam #1978

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions content/en/docs/3.features/4.data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -272,3 +272,11 @@ The `asyncData` method is not called on query string changes by default. If
::alert{type="next"}
Learn more about the [watchQuery property](/docs/components-glossary/watchquery) and see the list of available [keys in context](/docs/concepts/context-helpers).
::

### Listening to param changes

By default every route param change will call `asyncData`. If you want to disable it, set up `watchParam: false`. For example it may be helpfull to disable `state` reset.

::alert{type="next"}
Learn more about the [watchParam property](/docs/components-glossary/watchparam).
::
31 changes: 31 additions & 0 deletions content/en/docs/7.components-glossary/11.watchparam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: 'The watchParam Property'
description: Watch param change and execute component methods on change (asyncData, fetch(context))
navigation.title: WatchParam Property
category: components-glossary
---
# The watchParam property

Watch param change and execute component methods on change (asyncData, fetch(context))

---

- **Type:** `Boolean` (default: `undefined`)

Use the `watchParam` key to set up a watcher for route params. If the params change, asyncData and fetch(context) will be called. Watching is enabled by default.

If you want to disable watching for params, set `watchParam: false`.

```js
export default {
watchParam: false
}
```

::alert{type="info"}
By default `nuxt.js` reset _page_ component `data` state after route param change, you can use `watchParam: false` to disable this behaviour.
::

::alert{type="warning"}
**Warning**: The new `fetch` hook introduced in 2.12 is not affected by `watchParam`. For more information see [listening to query string changes](/docs/features/data-fetching#the-fetch-hook) for params is the same.
::