[Vuejs]-Nuxt 3 props value not receiving first time on mounted method

by

0👍

Child component is mounted before await useFetch("my-api-url") is called at Parent component, so while useFetch() is getting data you will get a blank object as prop.

If you want to listen when props are changed you could use watch:

watch(() => props.formData, (old, new) => {
    console.log(new);
});

0👍

You Should get your response first before rendering the child component

<template>
  <ChildComponent
  v-if="formDataReady" 
    :form-data="formData.childData"
  />
<script setup>
const formData = reactive({
 ...
 ...
});

const formDataReady = ref(false)

onMounted(() => {
    try {
      const { data, error } = await useFetch("my-api-url");
      if (data.value) {
        formData = data.value;
        formDataReady.value = true
      }
    } catch (err) {
      // handle error
    }
});
</script>
</template>

Leave a comment