Laravel 5 vue.js:属性或方法"comment"未在实例上定义，但在渲染期间被引用 [英] Laravel 5 vue.js: Property or method "comment" is not defined on the instance but referenced during render

问题描述

我正在使用vue.js和laravel5.8创建评论系统.

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

我已经完成了模型和播种工作，所以我现在对一篇帖子有10条评论(id为51).

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

但是我遇到了这个错误，

But I got this error,

属性或方法"comment"未在实例上定义，但 渲染期间引用

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

和

无法读取未定义的属性用户"

Cannot read property 'user' of undefined

我在获取数据时遇到问题.

I have problems with fetching data.

我为注释功能创建了一个新端点. web.php

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

我想在show.blade.php中显示评论.

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

ResultsController.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

show.blade.php

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

comments.vue

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

CommentsController.php

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

comment.php

comment.php

protected $with = ['user'];

我无法在此处获取数据对象.

I cannot get data object here.

推荐答案

在axios中，您可能需要从返回的响应中访问data(请参阅

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
        })
    }
}

请注意使用response.data.data.

我假设返回->paginate()会将结果放入返回数组的data键中.如果没有，则只需使用response.data.

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.

这篇关于Laravel 5 vue.js:属性或方法"comment"未在实例上定义，但在渲染期间被引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！