Question

laravel Vue.js：渲染时出错：“TypeError：无法读取 null 的属性‘user’”

2019-10-08

2178

javascript php laravel vue.js error-handling

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

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

在我的 chrome vue dev 工具中，我可以获取对象，但无法显示评论。

I want to retrieve and show user name and user's comment.

如果有人能帮助我，我会很高兴。

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

谢谢你们，我可以通过更改为v-for =“ in yn comment.data.data”：key =“ comment.Id”来解决此问题。

Answer 3

摘自官方文档（第二段由我突出显示）：

Using v-if and v-for together is not recommended . See the style guide for further information.

When used together with v-if, v-for has a higher priority than v-if . See the list rendering guide for details.

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

请参阅官方文档和上面的引用中链接的建议解决方案。例如，您可以拥有一个计算属性，该属性可预先过滤 comments.data ，仅显示那些设置了 user 的评论。

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

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

附加说明： 使用 v-for 时，您还应提供 :key 值。它对于每个呈现的元素都必须是唯一的，因此，如果您的评论有 ID，比如 comments.data[...].id ，则 :key="comment.id" v-for="comment in comments.data" 是有意义的。