无法在Laravel Vue中获取数据

Question

我试图通过子弹显示我的帖子的详细信息，但数据不会呈现。我刚得到我的导航栏和白页，

代码

controller

public function single($slug)
    {
        $post = Post::where('slug', $slug)->first();
        return response()->json([
            "post" => $post
        ], 200);
    }

single.vue，我在其中显示我的单个帖子数据

<template>
    <div class="post-view" v-if="post">
        <div class="user-img">
            <img src="...." alt="">
        </div>
        <div class="post-info">
            <table class="table">
                <tr>
                    <th>ID</th>
                    <td>{{ post.id }}</td>
                </tr>
                <tr>
                    <th>Title</th>
                    <td>{{ post.title }}</td>
                </tr>
                <tr>
                    <th>Body</th>
                    <td>{{ post.body }}</td>
                </tr>
            </table>
            <router-link to="/blog">Back to all post</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            if (this.posts.length) {
                this.project = this.posts.find((post) => post.slug == this.$route.params.slug);
            } else {
                axios.get(`/api/posts/${this.$route.params.slug}`)
                    .then((response) => {
                        this.post = response.data.post
                    });
            }
        },
        data() {
            return {
                post: null
            };
        },
        computed: {
            currentUser() {
                return this.$store.getters.currentUser;
            },
            posts() {
                return this.$store.getters.posts;
            }
        }
    }
</script>

vuex store.js

state: {
        posts: []
    },
getters: {
        posts(state) {
            return state.posts;
        }
    },
mutations: {
        updatePosts(state, payload) {
            state.posts = payload;
        }
    },
actions: {
        getPosts(context) {
            axios.get('/api/posts')
            .then((response) => {
                context.commit('updatePosts', response.data.posts);
            })
        }
    }

问题

1. 为什么我无法获取帖子数据？我的代码有什么错误吗？

............................................... ................................................... ................................................... .............................

Answer 1

您正在调用/api/posts/${this.$route.params.slug}，它（按照REST约定）返回一个post对象。

设置帖子（this.post = response.data.post时，应使用response.data（不包含.post）