Bei der montierten Methode wurde der Requisitenwert von Nuxt 3 zum ersten Mal nicht erhalten.

Question

Ich arbeite an Nuxt 3 und habe ein Problem mit Requisiten. Ich übergebe ein Objekt über Requisiten von der übergeordneten Komponente an die untergeordnete Komponente, aber wenn ich diese Requisiten in der Konsole ausdrucke, scheint das Objekt leer zu sein, aber wenn ich dieselbe Konsole unterhalb der setTimeout-Funktion in die gemountete Methode einfüge, funktioniert es einwandfrei. Weitere Ideen finden Sie im folgenden Code.

Übergeordnete Komponente

<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>

Unterkomponente

<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>

Ich habe versucht, die asynchrone Funktion onMounted( async () => { ... }) auf onMounted zu verwenden, aber es hat nicht funktioniert.

Gibt es eine Standardoption, um Requisiten auf onMounted zu verwenden, ohne die Funktion setTimeout zu verwenden? Bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

在父组件中调用await useFetch("my-api-url")之前，子组件已经挂载，因此在useFetch()获取数据时，您将得到一个空对象作为props。

如果您想在props发生变化时进行监听，可以使用watch：

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