在mounted方法中，Nuxt 3的props值第一次沒有接收到。

Question

我正在研究Nuxt 3，並且在props方面遇到了問題。我透過props將一個物件從父元件傳遞給子元件，但是當我在控制台列印這些props時，物件似乎是空的，但是如果我將相同的控制台放在mounted方法內的setTimeout函數下面，那麼它就能正常運作。請查看下面的程式碼以獲取更多想法。

Parent component

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

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

子元件

<template>
  {{ }}
<script setup>
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: "",
  },
});

onMounted(() => {
  console.log(props.formData); // **Receiving blank object**

  setTimeout(() => {
      console.log(props.formData); // **Receiving perfectly **
  }, 1000) 
});
</script>
</template>

我嘗試在onMounted上使用非同步函數onMounted( async () => { ... })，但沒有起作用。

如果沒有使用setTimeout函數，是否有任何標準選項可以在onMounted上使用props，請幫我解決這個問題。

Answer 1

在父元件中呼叫await useFetch("my-api-url")之前，子元件已經掛載，因此在useFetch()取得資料時，您將得到一個空物件作為props。

如果您想在props發生變化時進行監聽，可以使用watch：

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