I'm currently working on displaying table data in a view using Vue.js and Laravel. Here is what I have attempted so far: This is the 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
);
},
}
}
Finally, here is the HTML part of Vue Template:
<div v-for="comment in comments" >
{{ comment.title }}
</div>
The error message that I receive in the browser is:
[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"
In addition, I also get:
[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.Furthermore:
TypeError: Cannot read property 'title' of undefined
By the way, I am confident that I have the necessary API endpoint set up at 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}
When I console log the result with:
axios.get("../api/comment").then(({ data }) => (console.log(data)))
I receive this output: https://i.sstatic.net/IEjLb.jpg