Reactive object does not trigger asyncData
zecar opened this issue · comments
John commented
Environment
- Operating System: Darwin
- Node Version: v20.12.2
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: pnpm@8.15.6
- Builder: -
- User Config: srcDir, devtools, modules, ignore, appConfig, css, extensions, routeRules, vue, nitro, runtimeConfig, auth, colorMode, router, csurf
- Runtime Modules: @nuxt/eslint@0.3.12, @nuxt/test-utils/module@3.12.1, @unocss/nuxt@0.60.0, @sidebase/nuxt-auth@0.7.2, @nuxt/ui@2.16.0, @pinia/nuxt@0.5.1, nuxt-csurf@1.5.2
- Build Modules: -
Reproduction
<template>
<USelectMenu
v-model="eventTypeFilter.selected"
:options="eventTypeFilter.options"
searchable
multiple
placeholder="Event type filter" />
</template>
<script setup lang="ts">
const page = ref(1)
const eventTypeFilter = reactive({
options: ['a', 'b', 'c'],
selected: []
})
const { data, pending } = await useAsyncData(
'events',
() => $fetch('/api/events', {
params: {
page: page.value,
eventTypeFilter: eventTypeFilter.selected
}
}),
{
watch: [page, eventTypeFilter.selected]
}
)
</script>
Describe the bug
choosing a value does not trigger another fetch
Additional context
If I use a ref array for the model and pass that to the watcher, it works
const selectedEventTypes = ref([])
Logs
No response
John commented
this was fixed by reading the docs on watchers :|
{
watch: [() => eventTypeFilter.selected]
}