Laravel 5: показывать комментарии, используя Vue.js

Question

Я создаю систему комментирования блогов, хочу показать комментарии к сообщению, используя vue.js. В консоли он говорит:

Свойство или метод "comment" не определен в экземпляре, но на него ссылаются во время рендеринга.

Кроме того, когда я пытаюсь поймать имя пользователя,Я получил эту ошибку

Ошибка при рендеринге: "TypeError: Невозможно прочитать свойство 'user' of undefined"

Я хочу показать комментарии и пользователей, которые оставили комментарии к определенному сообщению

в 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>

таблица миграции

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, у меня есть это.

protected $with = ['user'];

Answer 1

У вас есть пара незначительных проблем с файлом Vue, которые могут быть решены довольно быстро.

Во-первых, вы должны определить comments как пустой массив - коллекция будет возвращена как массив объектовк Vue. Добавляя ненужное свойство data в начале, вы позволяете циклу v-for запускаться в вашем шаблоне до получения данных.

РЕДАКТИРОВАТЬ: я не уверен в том, как вы написалиэта функция данных, поэтому я переписал ее так, как мне знакомо.

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

Во-вторых, вы хотите получить правильные данные из ответа. Данные Axios хранятся на другом уровне (response.data). Конечно, если вы разбиваете на страницы результаты, они еще на один уровень (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
    })
}

---

РЕДАКТИРОВАТЬ: Спасибо за предоставление Gist! Я думаю, что теперь я вижу вещи более четко.

Обновите свой контроллер следующим образом:
Вы хотите загрузить комментарии в пост здесь.

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

И вы лезете вот так:
Вашему модулю нужна отдельная запись, а не массив комментариев.

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

А вам Vue нравится так:
Вам вообще не нужно использовать Axios, так как мы уже загрузили комментарии.

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