在Vue Js上更改API后,数据未更新

时间:2020-07-11 23:19:33

标签: vue.js vuejs2 axios vue-component

好的,我有一个问题,在这里我创建了一个带有标签的数据发布,当我单击该标签时,其他数据发布不会被该标签更新。

我获得了具有创建函数的api,我必须使用vuex吗?

每个人都可以帮助我,非常感谢

这是我的模板

<div class="col-md-4 mb-4" v-for="post in posts" :key="post.id">
                        <div class="card h-100 shadow-sm border-0 rounded-lg">
                            <div class="card-img">
                                <img :src="path+'/storage/posts/'+post.image" class="w-100"
                                    style="height: 200px;object-fit: cover;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                            </div>
                            <div class="card-body">
                                <router-link :to="{name: 'detail_post', params: {slug: post.slug}}"
                                    class="text-dark text-decoration-none">
                                    <h6>{{ post.title }}</h6>
                                </router-link>
                            </div>
                            <div class="card-footer bg-white">
                                <i class="fa fa-calendar" aria-hidden="true"></i> {{ post.created_at }}
                            </div>
                        </div>
                    </div>

这是我的JavaScript

<script>
    //import axios
    import axios from 'axios'

    export default {
        name: 'PostIndex',
        data() {
            return {
                path: axios.defaults.baseURL,
                posts: []
            }
        },
        created() {
            //get post homepage
            axios.get(`/api/tag/${this.$route.params.slug}`).then(response => {
                this.posts = response.data.data.data;
            })

        }
    }
</script>

0 个答案:

没有答案