Dans la méthode montée, la valeur des accessoires de Nuxt 3 n'a pas été reçue pour la première fois.
P粉418351692
P粉418351692 2023-07-19 17:47:03
0
1
709

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 ?

P粉418351692
P粉418351692

répondre à tous(1)
P粉041856955

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);
}); 
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal