How do you watch for body change in usefetch?
<script setup>
const usersByLastName = reactive <UsersByLastName> ({ lastName: "" });
const { data, pending, error } = useFetch("/api/users/bylastname", {
method: "POST",
body: usersByLastName,
});
</script>
<template>
<input v-model="usersByLastName.lastName" />
<div v-if="pending">Caricamento...</div>
<div v-if="error">Errore: {{ error }}</div>
<div v-if="data">
<ul>
<li v-for="user in data.users">
{{ user.firstName }} {{user.lastName}}
</li>
</ul>
</div>
</template>
2 Replies
Hi @valerio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To watch for changes in the
body of useFetch, you can use the watch option. However, in your specific case, there's a more idiomatic approach using Vue's reactivity system. Here's how you can modify your code to achieve this:
In this modified version, we've added the watch option to the useFetch call. By including usersByLastName in the watch array, Nuxt will automatically re-run the fetch operation whenever usersByLastName changes.
This approach is based on the information from the Nuxt documentation on Data Fetching, which states:
"To re-run your fetching function each time other reactive values in your application change, use the watch option. You can use it for one or multiple watchable elements."
By using this method, you ensure that the API is called with the updated body whenever usersByLastName.lastName changes, without needing to manually trigger a refresh.
Remember that watching reactive values won't change the URL fetched, but in your case, since you're using a POST request with a body, this approach will work as expected.
Nuxt Documentation on Data Fetching
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@612831566565212160> Kapa.ai is still learning and improving, please let me know how I did by reacting below.