Javascript Laravel 5：使用Vue.js显示注释

我正在创建博客评论系统，我想使用vue.js显示帖子的评论。 在控制台中，它说

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

另外，当我试图捕获用户名时，我得到了这个错误

呈现中出错：TypeError:无法读取未定义的属性“user”

我想显示评论和对特定帖子发表评论的用户

在show.blade.php中

web.php

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

结果控制器

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

评论.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
            })
        }
    }
}

php，我有这个

protected $with = ['user'];

---

您的Vue文件有几个小问题，可以很快解决

首先，应该将注释定义为空数组-集合将作为对象数组返回到Vue。通过在开始处添加不必要的数据属性，可以在检索数据之前在模板中运行v-for循环

编辑：我不确定您编写这个数据函数的方式，所以我以我熟悉的方式重新编写了它

资料{ 返回{ 评论：[] } }, 其次，您希望从响应中获得正确的数据。Axios数据存储在另一个级别deep response.data中。当然，如果要对结果进行分页，则它们是一个更高级别的deep response.data.data

获取评论{ axios.get`/results/${this.post.id}`。thenresponse=>{ this.comments=response.data //或用于分页结果 //this.comments=response.data.data } } 编辑：谢谢你提供的要点！我想我现在看得更清楚了

按如下方式更新控制器： 您希望将评论加载到此处的帖子中

公共功能showPost$post { $推荐职位=职位：：最新 ->其中日期'date'，'>'，日期'Y-m-d' ->其中'category_id'，'='，$post->category_id ->其中'id'，'！='，$post->id ->限制7 ->得到； //在这里加载帖子评论 $post->加载“评论”； $posts['special_post']=$post； $posts['recommended_posts']=$recommended_posts； 返回视图'posts.show'，压缩'posts'； } 你是这样说的： 您的模块需要一篇文章，而不是一系列评论

你是这样想的： 实际上，您根本不需要使用Axios，因为我们已经加载了注释

从“vue化身”导入化身 导出默认值{ 道具：['post']， 组成部分：{ 阿凡达 }, 资料{ 返回{ 评论：this.post.comments } }, }

---

你有没有试过检查一下你的ResultsController@show返回所需的数据？是的，我将return$post->comments->paginate5；在controller中，我可以看到5个objects.console.log在api回调中记录数据对象并检查数据对象。我想应该是这样。评论=数据。数据。首先检查您的数据对象—您正在使用相同的端点来显示视图并获取注释。因此，当调用fetchComment方法时ResultsController@show返回的不是JSON，而是组成视图的HTML。尝试创建一个专用端点，以JSON格式返回某篇文章的注释。@JulioMotol我添加了一个新的端点路由：：get'results/{post}/comments'，'CommentsController@index'; 并更改为这样的/results/${this.post.id}/comments，但它不起作用。谢谢，但我仍然有一个相同的错误。实例上未定义注释。我已将$post->comments->with'user'->get；在ResultsController中，但仍然存在相同的错误。无法读取未定义的属性'user'。我发现您新添加了受保护的$with=['user']，它应该负责处理该关系。您确定您的所有评论都已分配给用户吗？你能把更新后的代码发布到一个包含Comment.php模型的网站上吗？谢谢你的回答。我上传了我的代码，如果你需要更多，请随时询问。我还尝试添加一个新端点。如果你查一下，我很高兴。

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

protected $with = ['user'];