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?