英文:
Nuxt 3 and Vue 3 onMounted call function useFetch function not getting data form APIs
问题
你好，我是新手在Nuxt和Vue中。我正在使用Nuxt框架从API获取数据。我想在onMounted方法调用时从API获取数据。我创建了一个单独的函数来调用API。该API根据产品ID获取数据。如果我在没有onMounted方法的情况下调用API，它可以正常工作，但是当我在onMounted方法中调用函数时，它不起作用。始终获取“null”值。以下是提供的代码：<script setup>const product = async (id) => {const { data, pending, error } = await useFetch(`https://fakestoreapi.com/products/${id}`);console.log("after this" + id);console.log(data.value);};onMounted(async () => {product(2);});</script>控制台输出after this 2null
英文:
Hi i am new in Nuxt and Vue. I am using Nuxt framework to get data form APIs. I want to get data from APIs when onMounted method call.
I created saprate function to call api. That api get data with product id.
If i call API without onMounted method it is working fine but when i call function in OnMounted method it is not working. always get "null" value.
Code given blew
<script setup>const product = async (id) => {const { data, pending, error } = await useFetch(`https://fakestoreapi.com/products/${id}`);console.log("after this" + id);console.log(data.value);};onMounted(async () => {product(2);});</script>Otuput in consoleafter this 2null
答案1
得分: 2
我不认为这是由于 onMounted 导致的，但似乎是一个时机问题。
使用以下方式的 nextTick 解决了这个问题：
import { nextTick } from 'vue';onMounted(async () => {await nextTick();await getProduct(2);});
我为您创建了一个可用的复现，供您测试 这里。
英文:
I don't think this is due to onMounted but it seems to be a timing issue
Using nextTick as follows solve the issue:
import { nextTick } from 'vue';onMounted(async () => {await nextTick();await getProduct(2);});
I created a working reproduction for you to test here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论