Laravel 5: show comments using Vue.js

Question

I am creating blog commenting system, I want to show comments for a post using vue.js. In console, it says

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

Also, when I try to catch user name, I got this error

Error in render: "TypeError: Cannot read property 'user' of undefined"

I want to show comments and users who commented to a particular post

in show.blade.php.

web.php

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

ResultsController

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;

    //return $post->comments()->paginate(5);  it returns objects

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

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}`).then(({ data }) => {
                this.comments = data
            })
        }
    }
}

show.blade.php

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

migration table

Schema::create('comments', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->integer('user_id');
        $table->integer('post_id');
        $table->text('body');
        $table->integer('comment_id')->nullable();
        $table->timestamps();
    });

comment.php, I have this.

protected $with = ['user'];

Have you tried checking if your ResultsController@show returns the desired data? — Julio Motol
– Julio Motol, Commented Oct 3, 2019 at 6:34
I did, I put return $post->comments()->paginate(5); in controller, then I could see 5 objects. — Yohei Umezu
– Yohei Umezu, Commented Oct 3, 2019 at 6:38
console.log the data object in your api callback and check the data object. I think it would be this.comments = data.data. (check first your data object ) — Mostakim Billah
– Mostakim Billah, Commented Oct 3, 2019 at 6:42
you're using the same endpoint to show the view and getting the comments. So when the fetchComment() method is called, your ResultsController@show is not returning a JSON but rather a HTML consisting your view. Try creating a dedicated endpoint that returns the comments for a certain post in JSON format. — Julio Motol
– Julio Motol, Commented Oct 3, 2019 at 6:42
@JulioMotol I added a new endpoint Route::get('results/{post}/comments', 'CommentsController@index'); and changed like this (/results/${this.post.id}/comments) but it didn't work. — Yohei Umezu
– Yohei Umezu, Commented Oct 3, 2019 at 10:13

matticustard · Accepted Answer · 2019-10-03 17:13:08Z

1

You have a couple of minor issues with your Vue file that can be addressed pretty quickly.

First, you should define comments as an empty array — a collection will be returned as an array of objects to the Vue. By adding an unnecessary data property in the beginning, you are allowing the v-for loop to run in your template before the data has been retrieved.

EDIT: I'm not sure about the way you wrote this data function, so I have re-written it a way in which I'm familiar.

data() {
    return {
        comments: []
    }
},

Second, you want to get the correct data from the response. Axios data is stored another level deep (response.data). Of course, if you are paginating the results, they are one more level deep (response.data.data).

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

        // or for paginated results
        // this.comments = response.data.data
    })
}

EDIT: Thank you for providing the Gist! I think I'm seeing things more clearly now.

Update your controller like so:
You want to load the comments into the post here.

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();

    // load the post comments here
    $post->load('comments');
    $posts['particular_post'] = $post;
    $posts['recommended_posts'] = $recommended_posts;

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

And you blade like so:
Your module wants a single post, not an array of comments.

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

And you Vue like so:
You don't actually need to use Axios at all since we've already loaded the comments.

<script>
    import Avatar from 'vue-avatar'
    export default {
        props: ['post'],
        components: {
            Avatar
        },
        data() {
            return {
                comments: this.post.comments
            }
        },      
    }
</script>

edited Oct 3, 2019 at 17:13

answered Oct 3, 2019 at 6:47

matticustard

5,1691 gold badge17 silver badges19 bronze badges

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

13 Comments

Yohei Umezu Over a year ago

Thank you, but still I have a same error. "comment" is not defined on the instance" .

Yohei Umezu Over a year ago

I have put $post->comments()->with('user')->get(); in ResultsController but still, I have the same error. Cannot read property 'user' of undefined".

matticustard Over a year ago

I see you have newly added protected $with = ['user'] which should take care of the relation. Are you sure all of your comments are assigned to a user? Can you post your updated code to a Gist including the Comment.php model?

Yohei Umezu Over a year ago

Thank you for answering me. I uploaded my codes, if you need more, feel free to ask. gist.github.com/YoheiUmezu/6583a87933ed94ff7df28eb532819632

Yohei Umezu Over a year ago

I have also tried adding a new endpoint . I am glad if you check stackoverflow.com/questions/58217427/… .

|

Collectives™ on Stack Overflow

Laravel 5: show comments using Vue.js

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related