Estoy usando vue3 con axios. Y quiero obtener datos sobre FatherComponent por solicitud de axios:

 <!-- Father.vue --> <script setup> import { onMounted, ref, provide } from "vue"; import ChildComponent from "@/components/Child.vue"; import { getForm } from "@/api/form"; const formData= ref({}); provide("formData", formData); async function getData() { // look like: { key1: { name: 'foo' }, key2: { name: 'bar' } } let res = await getForm(); formData.value = res; } onMounted(() => { getData(); }); </script> <template> <div> <ChildComponent /> </div> </template>

Y use formData en ChildComponent :

 <!-- Child.vue --> <script setup> import { inject } from "vue"; const formData = inject("formData"); </script> <template> <div> <div>{{ formData }}</div> <div>{{ formData.key1 }}</div> </div> </template>

Funciona bien, solo el primer div muestra un {} y el segundo div está en blanco antes getForm() responda. Pero si trato de obtener el nombre de key1 , informará un error:

 <!-- Cannot read properties of undefined (reading 'name') --> <div>{{ formData.key1.name }}</div>

Traté de borrar key1 en ref() :

 // Father.vue const formData = ref({ key1: {}, key2: {} });

Funciona pero eso es muy molesto y no es lo que necesito.

Entonces, quiero provide() los datos después de la respuesta, y ChildComponent puede inject() los datos actualizados directamente, no el {} predeterminado, ¿cómo puedo hacerlo?