KHi @kora. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
K----------------------
Your issue is that the data returned by useAsyncData does not update when route.params.clubSlug changes, even though you are calling refresh() in a watcher.
What's happening:
Instead of using a watcher, you can leverage Nuxt's built-in reactivity by using a computed key for useAsyncData. This way, when route.params.clubSlug changes, the key changes, and Nuxt will automatically refetch the data.
This approach is recommended in the Nuxt documentation for dynamic data fetching based on route parameters. When the key changes, Nuxt will automatically refetch the data for you, and you don't need a manual watcher or refresh call. See the Nuxt docs on reactive keys for more details.
Your issue is that the data returned by useAsyncData does not update when route.params.clubSlug changes, even though you are calling refresh() in a watcher.
What's happening:
- useAsyncData only re-executes its handler automatically when its key changes or when a watched source (via the watch option) changes.
- In your code, you are using the handler signature (no explicit key), so Nuxt generates a static key based on the file and line number. This means changing route.params.clubSlug does not change the key, so Nuxt does not know to refetch automatically.
- While you are manually calling refresh() in a watcher, this should work, but there may be issues if the watcher or refresh is not set up as expected.
Instead of using a watcher, you can leverage Nuxt's built-in reactivity by using a computed key for useAsyncData. This way, when route.params.clubSlug changes, the key changes, and Nuxt will automatically refetch the data.
This approach is recommended in the Nuxt documentation for dynamic data fetching based on route parameters. When the key changes, Nuxt will automatically refetch the data for you, and you don't need a manual watcher or refresh call. See the Nuxt docs on reactive keys for more details.
KSummary:
References:
- Use a computed key in useAsyncData that depends on route.params.clubSlug.
- Remove the manual watcher and refresh.
- This will ensure your data updates automatically when the route changes.
References:
- Nuxt useAsyncData: Reactive Keys
- Nuxt useAsyncData: Watch Params
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
K@637669517811515415 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
