Search code examples
nuxt.jsnuxt3.js

useFetch doesn't work as expected in nuxt

I'm using useFetch watch to trigger a request when some data changes.

My code:

<script setup>
const page = ref(1);
const pageCount = ref(10);
const search = ref('');

const filterParams = ref({
  role_id: undefined,
});

await useFetch('events', {
  method: 'GET',
  query: {
    q: search,
    filterParams,
    page: page,
    limit: pageCount,
  },
  watch: [search, pageCount],
  onRequest: (config) => {
    console.log('request was sent');
  },
});
</script>

<template>
  <select v-model="filterParams.role_id">
    <option :value="1">1</option>
    <option :value="2">2</option>
  </select>
</template>

For some reason, the the request gets executed even though filterParams is not in the watch array.

Check here for a working demo.

Solution

  • When you specify some reactive parameters in query, useFetch will be called when they are changed. It's like watch.
    Computed URL.