estoy intentando traer los datos de un array de post los cuales vienen con sus respectivos comentarios, pero no logro acceder a los comentarios a traves de vuejs. con laravel simplemente hacia un foreach aninado y era suficiente pero en este caso veo que no da los mismos resultados. app.js primero obtengo los resultados
app = new Vue({
el: '#crud',
created:function(){
this.getPost();
},
data: {
posts:[],
},
methods:{
getPost:function(){
let url = 'post';
axios.get(url).then(response =>{
this.posts = response.data
})
}
}
})
{
"posts": [
{
"id": 27,
"title": "soy anonimo",
"body": "anonimus",
"image": null,
"is_anon": 1,
"user_id": 3,
"created_at": "2020-05-13T22:50:04.000000Z",
"updated_at": "2020-05-13T22:50:04.000000Z",
"comment": [
{
"id": 2,
"comment": "saludos",
"date_comment": "0000-00-00",
"time_comment": "00:00:00",
"user_id": 1,
"post_id": 27,
"created_at": null,
"updated_at": null
}
]
},
]
}
en la vista intente esto:
<div id="crud">
<p v-for="post in posts">
@{{post.title}}
<p v-for="comment in post.comment">
@{{comment.comment}}
</p>
</p>
</div>
pero no hay caso , no puedo acceder a los comentarios, como podria logarlo?
al escribir en la vista
<div id="crud">
<p v-for="post in posts">
@{{post.title}}
@{{post.comment}}
</p>
</pre>
obtengo:
miTitulo [ { "id": 3, "comment": "eres un titulo", "date_comment": "0000-00-00", "time_comment": "00:00:00", "user_id": 1, "post_id": 7, "created_at": null, "updated_at": null } ]
al agregar en la vista @{{post.comment[0]}} ([0])
miTitulo { "id": 3, "comment": "eres un titulo", "date_comment": "0000-00-00", "time_comment": "00:00:00", "user_id": 1, "post_id": 7, "created_at": null, "updated_at": null }
seria el mismo resultado pero con los corchetes. entonces quedaria acceder asi
@{{post.comment[0].id}}
pero al apuntar al id (o cualquier otro atributo recibo el error)
Error in render: "TypeError: post.comment[0] is undefined"
.then
de la llamada axios ponesthis.posts = response.data.posts
?