Tengo un objeto de datos en una aplicación Vue.js
data() {
return {
group1: {
id: 'qd4TTgajyDexFAZ5RKFP',
owners: {
john: {age: 32, gender: 'man'},
mary: {age: 34, gender: 'woman'},
}
}
}
}
Estoy tratando de obtener la edad de Mary dentro de la plantilla de Vue de esta manera...
Puedo llegar a owners así...
<p>{{group1.owners}}</p>
pero si trato de perforar más así...
<p>{{group1.owners.mary.age}}</p>
...Recibo un mensaje de error que dice que no puede llegar a mary de undefined .
"TypeError: Cannot read properties of undefined (reading 'id')"
¿Alguien por ahí que pueda ayudar?
Prueba eso mejor
<script>
export default {
data() {
return {
group1: {
id: 'qd4TTgajyDexFAZ5RKFP',
owners: {
john: {
age: 32,
gender: 'man'
},
mary: {
age: 34,
gender: 'woman'
},
}
}
}
}
}
</script>
<template>
<pre>result: {{ group1.owners.mary.age }}</pre>
</template>
Aquí hay un ejemplo de trabajo .