Nuxt•3mo ago

UPagination

I've set up a watch when the "page" state changes, which refreshes the data, but it has no effect even though the page state does change, why?

const { data: yachtsData, error, refresh } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page: page.value,
      },
    });
watch(page, () => {
  refresh();
});

const { data: yachtsData, error, refresh } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page: page.value,
      },
    });
watch(page, () => {
  refresh();
});

<UPagination v-model="page" :page-count="5" :total="yachtsData.total" />

<UPagination v-model="page" :page-count="5" :total="yachtsData.total" />

8 Replies

Furnaxe•3mo ago

Help pls I've also tried an @click on UPagination but to no avail, it doesn't fit in the function.

Jeffrey GONZALES•3mo ago

Hey, @Furnaxe, sorry I don't have much time to help. Let me just ask a clarifying question, and then if someone else wants to pick up and answer in my place that'll be great: Why do you want to watch the page? I think you should add the page to your useFetch URL directly if I'm correct, because that way, it would be cached appropriately…

Furnaxe•3mo ago

Basically watch isn't there but when I use UPagination and try to change page, the refresh doesn't happen even though my page variable changes. I was looking for a way to trigger the refresh either by a watch or an @click as nothing is happening at the moment. Thanks for your time !

Kuroro•3mo ago

Did you try this ? I think useFetch is waiting for the reactive part of your variable page You don't need to use watch() when you're using useFetch because it's already looking for changes in his options (included params)

const { data: yachtsData, error } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page,
      },
    });

const { data: yachtsData, error } = useFetch(
    '/api/yachts/getAllYachts', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      params: {
        page,
      },
    });

If you want to continue with a watch solution, ensure the watch is triggered by logging something (and be sure that there's no warn/error logs)

Jeffrey GONZALES•3mo ago

I concur with @Kuroro that you should try to pass page directly, instead of page.value because the documentation states:

All fetch options can be given a computed or ref value. These will be watched and new requests made automatically with any new values if they are updated.

cf. https://nuxt.com/docs/api/composables/use-fetch#params Let us know if that worked out or not @Furnaxe.

Nuxt

useFetch · Nuxt Composables

Fetch data from an API endpoint with an SSR-friendly composable.

Furnaxe•2mo ago

Thanks to all ❤️ It works @Jeffrey GONZALES @Kuroro

Kuroro•2mo ago

Nice 👍🏻

Jeffrey GONZALES•2mo ago

👍🏻

Gaming

Programming

UPagination