0

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"
5
  • ¿Estás seguro que es la vista? Después de obtener los datos, si los imprimes por consola, ¿los tienes? ¿Has pensado la posibilidad de que estés intentando renderizar los datos antes de que la petición HTTP se resuelva?
    – VRoxa
    Commented el 15 may. 2020 a las 14:13
  • El título del post sí lo imprime? Te dá algún error? Commented el 15 may. 2020 a las 14:18
  • el titulo del post me lo resuelve correctamente y si pongo @{{post.comment}} me da el array con los comentarios, solo que no puedo iterarlos..
    – xDonYeyox
    Commented el 15 may. 2020 a las 15:14
  • Qué pasa si en el .then de la llamada axios pones this.posts = response.data.posts? Commented el 15 may. 2020 a las 15:58
  • Qué pasa si en el .then de la llamada axios pones this.posts = response.data.posts . Me devuelve {}
    – xDonYeyox
    Commented el 15 may. 2020 a las 16:06

1 respuesta 1

0

Editado

Ya que tienes doble array bidimensional, uno dentro del otro.

Lo puedes hacer de la siguiente manera:

<div id="crud">
    <div v-for="post in posts">
        @{{post.title}}

        <p v-for="comment in post.comment">
            @{{comment.comment}}
        </p>

    </div>
</div>

Me falto añadir que en tu código javascript tienes un pequeño error.

Estas usando la instancia this a un nivel que no puede ser heredada, lo recomendable es guardar en una nueva variable la instancia para que no te de problemas.

Así:

app = new Vue({
  el: '#crud',
  created: function () {
    this.getPost();
  },
  data: {
    posts:[],
  },
  methods:{
    getPost: function () {
        const _self = this;
        let url = 'post';
        axios.get(url).then(response => {
            _self.posts = response.data.posts
        })
    }
  }
})
2
  • @xDonYeyox he editado mi respuesta después de percatarme de un ligero error que tenias en tu código. Commented el 15 may. 2020 a las 18:43
  • puede que quizás ese haya sido el error desde un principio Commented el 15 may. 2020 a las 18:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.