error in calling data to view in laravel and vue js

Question

i am trying to show some table data in view using vue js and laravel : here is what i have tried : this is comment controller :

 public function index()
{
    $comment = Comment::Latest()->paginate(10);
    return new CommentResource($comment);
}

here is my vue js comment script

  export default {
    data: function() {
        return {
            comments: {}
        }
    },
    created() {
        this.loadComments();
    }
    ,
    methods: {
        loadComments(){
        axios.get("../api/comment").then(
            ({ data })=>(this.comments - data.data)
            // response => this.comments = response.data
        );
        },
    }
}

and finally the html part of vue html

 <div v-for="comment in comments" >
 {{ comment.title }}
 </div>

the result is this error i get in browser :

[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"

and here

[Vue warn]: Property or method "comment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

and

TypeError: Cannot read property 'title' of undefined

btw i am sure that i have this because this is my api that i recice on http://localhost:8000/api/comment

{"current_page":1,"data":[{"id":1,"title":"asd","body":"asd","user_id":1,"user_email":"asd","status":1,"created_at":null,"updated_at":null}],"first_page_url":"http:\/\/localhost:8000\/api\/comment?page=1","from":1,"last_page":1,"last_page_url":"http:\/\/localhost:8000\/api\/comment?page=1","next_page_url":null,"path":"http:\/\/localhost:8000\/api\/comment","per_page":10,"prev_page_url":null,"to":1,"total":1}

and when i console log this :

  axios.get("../api/comment").then(({ data }) => (console.log(data)))

i get this result :

SimonDepelchin · Accepted Answer · 2019-03-24 13:46:51Z

2

You're already extracting data from the response. So either you use the response object like this :

axios.get("../api/comment").then((response) => (this.comments = response.data.data)));

Or you extract the data property and use it.

axios.get("../api/comment").then(({ data }) => (this.comments = data.data)));

This is because axios returns a response object that has a data property that contains the server response. As your server response also has a data property that you want to use, you want to use response.data.data

edited Mar 24, 2019 at 13:46

answered Mar 24, 2019 at 13:04

SimonDepelchin

2,09023 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Farshad Over a year ago

so i dont get it to be honest i am extracting part wrong or showing it because still with your code i got the same errors on consol and no display of data

SimonDepelchin Over a year ago

Can you console.log the result? axios.get("../api/comment").then(({ data }) => (console.log(data); this.comments = data)));

Farshad Over a year ago

i did that with a bit of change in the code you privided because of syntax error so please check edited question i think that means that i get the data but i dont show it right . . . !!

SimonDepelchin Over a year ago

Okay, then it's just this : axios.get("../api/comment").then(({ data }) => (this.comments = data.data))); I edited my answer

SimonDepelchin Over a year ago

In fact axios returns a response object that has a few properties like data, status, headers, etc.. the data property contains the response sent by the server (in your case the pagination which also has a data property). So response is the axios response, response.data is the server response and response.data.data is the pagination data... See Response Schema

|

Collectives™ on Stack Overflow

error in calling data to view in laravel and vue js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related