Question

我目前正在学习Vue，并使用laravel作为后端。我为论坛设置了一个关系，它将在下面的User模型示例中获取作者的用户名：

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

如果我从首页进入论坛，则会显示正确的用户名（而不是主题的存储用户ID）

提交新主题后，将引发以下错误：

[Vue警告]：渲染错误：“ TypeError：无法读取属性 “用户名”未定义”

我环顾四周，似乎无法找到答案。.这是我的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方法的错误方法。这样只会传回用户ID而不是用户名。

在我的修正内（不确定该走的正确路线），我删除了：

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

，并将其替换为：this.fetchTopics();，以便随后将重新获取保留fetch_author关系的所有主题。

这似乎效果很好，但还是不能确定这是否是最佳路线。

在提交Vue表单后Laravel关系破裂

1 个答案: