无法在 laravel vue 中获取数据

Question

我尝试通过 slug 显示我的 posts 的详细信息，但数据不会呈现。我刚拿到我的导航栏和白页，

代码

controller

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

single.vue 我在哪里显示我的单身 post 数据

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

问题

为什么我无法获取我的 post 数据？我的代码有什么错误吗？

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

Answer 1

您正在调用 /api/posts/${this.$route.params.slug}，其中（根据 REST 约定）returns 一个 post 对象。

在设置 post (this.post = response.data.post) 时，您应该使用 response.data（没有 .post）

无法在 laravel vue 中获取数据

Can't get data in laravel vue

laravel

vue.js

vue-router

代码

问题