Laravel разрывает отношения после отправки формы

Question

В настоящее время я изучаю Vue и использую laravel в качестве моего бэкенда. У меня установлена ​​связь для форума, где он будет получать имя пользователя автора из приведенного ниже примера модели User:

public function fetchAuthor()
    {
        return $this->belongsTo('App\User', 'author', 'id');
    }

Если я перейду с домашней страницы, скажем, на форум, она будет отображаться правильно с именем пользователя (а не с сохраненным идентификатором пользователя темы), однако,

При отправке новой темы выдается ошибка:

[Vue warn]: ошибка при рендеринге: «Ошибка типа: не удается прочитать свойство 'username' из undefined "

Я осмотрелся и, похоже, не могу найти ответ, какой из них работает .. Вот мой код сценария Vue:

<script>
    export default {
        data(){
            return {
                topics: {
                    author: '',
                    topic: '',
                    content: '',
                },
                errors: [],
                forumTopics: [],
            }
        },
        mounted()
        {
            this.fetchTopics();
        },
        ready() {
            this.updateContent()
        },
        methods: {
            updateContent: function (){
                this.$http.get('api/gameForum')
                    .then(response => {
                        this.forumTopics = response.data.forumTopics
                    });
                setTimeout(this.updateContent, 1000);
            },
            initAddTopic()
            {
                $("#add_topic_modal").modal("show");
            },
            createTopic()
            {
                axios.post('api/gameForum', {
                    topic: this.topics.topic,
                    content: this.topics.content,
                })
                    .then(response => {

                        this.reset();

                        $("#add_topic_modal").modal("hide");

                        this.forumTopics.push(response.data.topics);
                    })
                    .catch(error => {
                        this.errors = [];
                        if (error.response.data.errors.topic) {
                            this.errors.push(error.response.data.errors.topic[0]);
                        }

                        if (error.response.data.errors.content) {
                            this.errors.push(error.response.data.errors.content[0]);
                        }
                    });
            },
            reset()
            {
                this.topics.topic = '';
                this.topics.content = ''
            },
            fetchTopics()
            {
                axios.get('api/gameForum')
                    .then(response => {
                        this.forumTopics = response.data.forumTopics;
                    });
            },
        }
    }
</script>

а вот контроллер (я покажу функцию индекса и функцию хранилища, которую я использую:

public function index()
    {
        if (Auth::user()->usergroup > 2)
        {
            $fetchTopics = ForumTopics::where('forum_type', 'game forum')
                ->orderBy('updated_at', 'desc')
                ->with('fetchAuthor')
                ->get();
        } else {
            $fetchTopics = ForumTopics::where('forum_type', 'game forum')
                ->where('deleted', 0)
                ->orderBy('updated_at', 'desc')
                ->with('fetchAuthor')
                ->get();
        }

        return response()->json([
            'forumTopics' => $fetchTopics
        ],200);
    }

вот функция магазина

public function store(Request $request)
    {
        $this->validate($request, [
            'topic' => 'required|max:40',
            'content' => 'required'
        ]);

        $forumTopics = ForumTopics::create([
            'author' => Auth::user()->id,
            'topic' => $request->get('topic'),
            'content' => $request->get('content'),
            'forum_type' => 'Game Forum'
        ]);

        return response()->json([
            'topics' => $forumTopics,
            'message' => 'Success'
        ], 200);
    }

Вот табличное представление, где вызывается имя пользователя:

<table class="table table-responsive" style="margin-top:1%;">
    <tbody>
    <tr v-for="topic in forumTopics">
        <td>
            {{ topic.fetch_author.username }}
        </td>
        <td>
            {{ topic.topic }}
        </td>
    </tr>
    </tbody>
</table>

ПРИМЕЧАНИЕ - Вы можете видеть, что я пытался запустить функцию updateContent (), это была моя последняя попытка до того, как я сюда попал.

Answer 1

Получается, что использование this.forumTopics.push(response.data.topics); было неправильным путем в методе create. Это только передало бы идентификатор пользователя вместо имени пользователя.

В моем исправлении (которое, я не уверен, правильный путь) я удалил:

this.forumTopics.push(response.data.topics);

и заменил его на: this.fetchTopics();, чтобы он затем извлек все темы, которые сохраняют отношение fetch_author.

Кажется, что он отлично работает, но опять же, не уверен, что это лучший маршрут ..