首页 > 解决方案 > Laravel vue-router 获取单个数据

问题描述

我正在尝试posts通过他们返回我的数据,slug但到目前为止我无法通过Vue-router

代码

controller

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

blog.vue

    <li v-for="post in posts" :key="post.slug">
      <router-link to="/blog/${post.slug}">{{ post.title }}</router-link>
    </li>

<script>
    export default {
        name: 'list',
        mounted() {
            if (this.posts.length) {
                return;
            }

            this.$store.dispatch('getPosts');
        },
        computed: {
            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);
            })
        }
    }

问题

问题是我在循环中得到了这种 url

site.pp/blog/${post.slug}

我应该得到类似的东西:

site.pp/blog/hello-world

问题

  1. 我在哪里犯错了?以及如何解决?

标签: laravelvue.jsvue-router

解决方案


推荐阅读