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. Где я ошибся? а как исправить?

должен быть :to="`/blog/${post.slug}`". Если он не использует v-bind, он считается обычным текстом.

Jacob Goh 10.08.2018 17:08

@JacobGoh, спасибо, он работает, но я не могу получить данные по одному сообщению (возможно, мне нужно задать новый вопрос :-p)

mafortis 10.08.2018 17:15
0
2
47
0

Другие вопросы по теме