Recibo un error en mi componente. ¿Puede alguien ayudar a resolver esto? Estoy trabajando en la versión vue 3. Obteniendo un error: "Error de tipo no capturado (en promesa): no se pueden leer las propiedades de undefined (leyendo 'dirección')" ¿Alguien tiene alguna idea? perfil.vue
<template> <div> <div class="col col-lg-12 col-xl-12" v-for="(_postData, index) in postData" v- bind:key="index"> <h1>{{ _postData.id.address }}</h1> </div> </div> </template>guion
data() { return { postData: {}, postPagination: { filter_data: [], page_no: 1, limit: 5 } } }, getPost() { try { CreatorService.getAllMedia(this.postPagination) .then((response) => { if (response.status === true) { this.postData = response.data } }) .catch((error) => { this.isPostLoading = false this.errorLog(error) }) } catch (e) { this.errorTryLog(e) } }respuesta
[ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } } ]En lugar de _postData.id.address intente _postData.address .
demostración :
new Vue({ el: '#app', data: { postData: [ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } } ] } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(_postData, index) in postData" :key="index"> <pre>{{ _postData.address }}</pre> </div> </div>