Estoy tratando de mostrar datos de un objeto JSON anidado. Los datos se recuperan correctamente de axios pero no consigo que se muestren.
El objeto json se ve así:
{ "id": "1", "name": "Germany", "continent": "Europe", "president": { "id": "12", "name": "Joanna Doe", } }En el componente vue, los datos se guardan en el objeto "país".
. . . data() { country: {}, }Si luego intento renderizarlo en la plantilla vue, obtengo todos los datos si renderizo lo siguiente:
<p>{{ country }}</p>Pero si trato de representar los datos del atributo "presidente" anidado de esta manera:
<p>{{ country.president.name }} </p>me sale el siguiente error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name') at Proxy.<anonymous> (CountryDetail.vue:25) at renderComponentRoot (runtime-core.esm-bundler.js:1165) at componentEffect (runtime-core.esm-bundler.js:5184) at reactiveEffect (reactivity.esm-bundler.js:42) at effect (reactivity.esm-bundler.js:17) at setupRenderEffect (runtime-core.esm-bundler.js:5137) at mountComponent (runtime-core.esm-bundler.js:5096) at processComponent (runtime-core.esm-bundler.js:5054) at patch (runtime-core.esm-bundler.js:4660) at componentEffect (runtime-core.esm-bundler.js:5191)¿Hay alguna forma de representar estos datos anidados?
¡Gracias!
Te falta una coma , después de "continent": "Europe" <- justo aquí.
Tu código debería funcionar. Ver este ejemplo
El country es inicialmente un objeto vacío (y luego se actualiza), pero su plantilla intenta representar las propiedades anidadas inmediatamente en:
<p>{{ country.president.name }} </p> Eso da como resultado un error porque country.president inicialmente no existe, por lo que no está undefined , lo que lleva al error de leer el name de undefined .
Una forma de resolver esto es representar condicionalmente ese <p> solo cuando se define country.president :
<p v-if="country.president">{{ country.president.name }}</p> Alternativamente, con Vue 3, puede usar el encadenamiento opcional para evitar el error de tiempo de ejecución. Sin embargo, el elemento <p> aún se representaría con un cuerpo vacío. (Si no desea la etiqueta vacía, siga con la solución de representación condicional anterior).
<p>{{ country.president?.name }}</p>