Nuxt 3和Vue 3 onMounted调用函数useFetch函数无法从API获取数据

iezvtpos  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(398)

你好,我是Nuxt和Vue的新手。我正在使用Nuxt框架来获取数据表单API。我想在onMounted方法调用时从API获取数据。
我创建了saprate函数来调用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>

Otuput in console
after this 2
null
fwzugrvs

fwzugrvs1#

我不认为这是由于onMounted而是it seems to be a timing issue
按如下方式使用nextTick解决问题:

import { nextTick } from 'vue';

onMounted(async () => {

  await nextTick();

  await getProduct(2);
});

我创建了一个工作复制品供您测试here

相关问题