Laravel 5 vue.js: Property or method "comment" is not defined on the instance but referenced during render

Question

I am creating commenting system using vue.js and laravel5.8.

I have done with models and seeding, so I have now 10 comments to one post (id is 51).

But I got this error,

Property or method "comment" is not defined on the instance but referenced during render

and

Cannot read property 'user' of undefined

I have problems with fetching data.

I created a new endpoint for a comment function. web.php

Route::get('results/{post}', 'ResultsController@show')->name('posts.show');
Route::get('results/{post}/comments', 'CommentsController@index');

I want to show comments in show.blade.php.

ResultsController.php

 public function show(Post $post)
{
    $recommended_posts = Post::latest()
                        ->whereDate('date','>',date('Y-m-d'))
                        ->where('category_id','=',$post->category_id)
                        ->where('id','!=',$post->id)
                        ->limit(7)
                        ->get();

    $posts['particular_post'] = $post;
    $posts['recommended_posts'] = $recommended_posts;
    $post->comments()->with('user')->get();

    return view('posts.show',compact('posts'));
}

show.blade.php

<comments-component :post="{{ $posts['particular_post']->comments }}"></comments-component>

comments.vue

<div class="reply-comment" :v-for="comment in comments">
                     <div class="user-comment" >
                        <div class="user">
                            <!--<img src="" alt="" >-->
                            <avatar :username="comment.user.name" :size="30" ></avatar>
                        </div>
                        <div class="user-name">
                            <span class="comment-name">{{ comment.user.name }}</span>
                            <p> {{ comment.body }} </p>
                        </div>
                    </div>
                    <div class="reply">
                        <div class="seemorecomments">
                            <a href="">see more</a>
                        </div>
                        <button class="reply-button">
                            <i class="fas fa-reply"></i>
                        </button>
                    </div>
                </div>
<script>
import Avatar from 'vue-avatar'
export default {
    props: ['post'],
    components: {
        Avatar
    },
    mounted() {
        this.fetchComments()
    },
    data: () => ({
        comments: {
            data: []
        }
    }),
    methods: {
        fetchComments() {
            axios.get(`/results/${this.post.id}/comments`).then(({data}) => {
                this.comments = data
            })
        }
    }
}

CommentsController.php

public function index(Post $post)
{
    return $post->comments()->paginate(5);
    $post->comments()->with('user')->get();
}

comment.php

protected $with = ['user'];

I cannot get data object here.

thisiskelvin · Accepted Answer · 2019-10-03 16:24:01Z

1

Within axios, you may need to access data from the response that is returned (see console.log examples here), try the following within your comments component:

methods: {
    fetchComments() {
        axios.get(`/results/${this.post.id}/comments`).then((response) => {
            this.comments = response.data.data
        })
    }
}

Note response.data.data is used.

I assume returning the ->paginate() will put the results within a data key in the returned array. If not, then just use response.data.

Also, in the controller getting the comments change to the following:

public function index(Post $post)
{
    return $post->comments()->with('user')->paginate(5);
}

This will eager load the users with the queried comments.

edited Oct 3, 2019 at 16:24

answered Oct 3, 2019 at 16:17

thisiskelvin

4,2021 gold badge12 silver badges18 bronze badges

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

3 Comments

Yohei Umezu Over a year ago

I executed php artisan migrate:refresh, seeded data, then, I tried your code here. I finally could catch data, but I cannot show comments yet, I updated my gist picture, could you check it out ? thank you. gist.github.com/YoheiUmezu/6583a87933ed94ff7df28eb532819632

thisiskelvin Over a year ago

Make sure you have a user relation within your comment.php file.

Yohei Umezu Over a year ago

I excluded : from :v-for and it worked ! Thanks a lot guys. I am really appreciated.

Collectives™ on Stack Overflow

Laravel 5 vue.js: Property or method "comment" is not defined on the instance but referenced during render

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related