Question

我正在使用Vue.js和laravel 5.8创建评论系统。我想在博客文章页面（show.blade.php）中显示评论，但出现错误

渲染错误：“ TypeError：无法读取null的属性'user'”

在chrome vue开发工具中，我可以获取对象，但不能显示注释。

我想检索并显示用户名和用户评论。

很高兴有人帮我。

comments.vue

<template>
<div class="commentarea" > 
    <div class="comment-posts" >
        <div class="user-comment-area" >
            <div class="user-post">
                <!---<img src="{{asset('people/person7.jpg')}}" class="image-preview__image">--->
                <input type="text" name="comment">
            </div>
            <div class="comments-buttons">
                <button class="cancel-button">Cancel</button>
                <button class="comment-button" type="submit">Comment</button>
            </div>
        </div>
        <h4>Comments ()</h4>

        <div class="reply-comment" v-if="comment.user" v-for="comment in comments.data">
                <div class="user-comment">
                <div class="user">
                    <!---<img src="{{ $comment->user->img }}" class="image-preview__image">--->
                    <avatar :username="comment.user.name"></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>
    </div>
    <div>
        <button  class="load">Load More</button>
    </div>
</div>
</template>

<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
            })
            .catch(function (error) {
            console.log(error.response);
            })
        }
    }
}
</script>

web.php

Route::get('results/{post}/comments', 'CommentController@index');

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

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

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

CommentsController.php

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

comment.php

 protected $with = ['user'];

show.blade.php

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

Answer 1

您正在从axios获取数据，并像Paginator一样使用它，但是axios会响应一个自己的AxiosResponse对象，然后，在AxiosResponse中就有一个对象，例如

{
   status: 200,
   data : {}  <= Your paginator is here
}

我认为是问题所在。您需要设置以下注释：

this.comments = data.data;

Answer 2

采用from the official docs（我强调第二段）：

不建议同时使用v-if和v-for 。有关更多信息，请参见style guide。

与v-if一起使用时，v-for的优先级高于v-if 。有关详细信息，请参见list rendering guide。

因此，您不能使用comment语句中的v-for，在评估v-if时它不可用。因此，它是未定义的，并且不能具有user属性，该属性可以解释错误消息。

请参阅与官方文档和上述引用相关的建议解决方案。例如，您可以具有一个计算属性，该属性仅对设置了comments.data的那些逗号进行预过滤user。

computed: {
  commentsWithUser: function() {
    return this.comments.filter(c => { return c.user });
  }
}

然后使用v-for="comment in commentsWithUser"。

附加说明：使用:key时还应提供一个v-for值。对于每个呈现的元素，它必须是唯一的，因此，如果您的注释具有ID，例如在comments.data[...].id中说，那么:key="comment.id" v-for="comment in comments.data"就有意义。

Answer 3

谢谢大家，我可以通过在comment.data.data“：key =” comment.id“中更改为v-for =” comment来解决此问题。

laravel Vue.js：呈现错误：“ TypeError：无法读取null的属性'user'”

3 个答案: