Dans la méthode montée, la valeur des accessoires de Nuxt 3 n'a pas été reçue pour la première fois.

Question

Je travaille sur Nuxt 3 et j'ai un problème avec les accessoires. Je passe un objet du composant parent au composant enfant via des accessoires, mais lorsque j'imprime ces accessoires dans la console, l'objet semble être vide, mais si je mets la même console sous la fonction setTimeout dans la méthode montée, cela fonctionnera bien. Consultez le code ci-dessous pour plus d'idées.

Composant parent

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

Sous-composant

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

J'ai essayé d'utiliser la fonction async onMounted( async () => { ... }) sur onMounted mais cela n'a pas fonctionné.

Existe-t-il une option standard pour utiliser des accessoires sur onMounted sans utiliser la fonction setTimeout. Veuillez m'aider à résoudre ce problème ?

Answer 1

Avant d'appeler wait useFetch("my-api-url") dans le composant parent, le composant enfant a été monté, donc lorsque useFetch() récupère les données, vous obtiendrez un objet vide comme accessoire.

Si vous souhaitez écouter quand les accessoires changent, vous pouvez utiliser watch :

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