vue js 在“POST”/“DELETE”/“PUT”请求后自动更新数据 | Vue.js 2

Question

每次我发出“POST”或“DELETE”请求时，我都不会自动获取更新的数据。但是在重新加载后获取更新的数据。在任何“POST”/“DELETE”/“PUT”请求之后，有什么简单的方法可以获取更新的数据吗？

我将如何实施？

我是 vue js 的新手。

这是我的代码

模板

// list
<b-row>
        <div v-for="article in articles" v-bind:key="article.id">
            <b-card v-bind:title="article.title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="text-left mb-2 mt-4 ml-2">
                <b-card-text>
                    {{ article.content }}
                </b-card-text>

                <b-button v-bind:href="'/'+ article.id" variant="primary">See more...</b-button>

                <button class="btn btn-danger btn-sm ml-1" v-on:click="deleteArticle(article)">
                    Delete
                </button>
            </b-card>
        </div>
    </b-row>
// create
    <div class="mt-5">
        <h2 class="text-left mb-3"> Create new </h2>

        <b-form @submit.prevent="create" method="post">

            <b-form-group>
                <b-col sm="1">
                    <label :for="`type-text`">Title:</label>
                </b-col>
                <b-col sm="9">
                    <b-form-input :id="`type-text`" :type="text" v-model="article.title" required></b-form-input>
                </b-col>
            </b-form-group>

            <b-form-group>
                <b-col sm="1">
                    <label for="textarea-no-auto-shrink">Content:</label>
                </b-col>
                <b-col sm="9">
                    <b-form-textarea id="textarea-no-auto-shrink" placeholder="write something..." v-model="article.content" required rows="3" max-rows="3"></b-form-textarea>
                </b-col>
            </b-form-group>

            <b-form-group>
                <b-col sm="1">
                </b-col>
                <b-button type="submit" class="mt-2 ml-3">Submit</b-button>
            </b-form-group>

        </b-form>

        

    </div>

脚本

import axios from 'axios'
export default {
    name: 'List',
    props: {},

    data() {
        return {
            articles: [],
            article: {
                title: '',
                content: '',
            }
        }
    },

    mounted() {
        axios
            .get('http://127.0.0.1:8000/api/')
            .then(response => (this.articles = response.data))
            .catch(error => console.log(error))
    },

    methods: {
        create() {
            axios
                .post('http://127.0.0.1:8000/api/',
                    this.article
                )
                .then(response => {
                    response.data.article = null;
                })
                .catch(error => console.log(error))
        },
        deleteArticle(artcl) {
            if (confirm('Delete ' + artcl.title)) {
                axios.delete(`http://127.0.0.1:8000/api/${artcl.id}`)
                    .then(response => {
                        this.all();
                        return response;
                    });
            }
        }
    },
}
</script>

Answer 1

您只能在已安装的周期中获取文章。因此您可以将这些代码行移动到一个方法中，并在需要时获取文章。

mounted() {
    this.fetchArticles();
},

methods: {
    fetchArticles () {
      axios
        .get('http://127.0.0.1:8000/api/')
        .then(response => (this.articles = response.data))
        .catch(error => console.log(error))
    },
    create() {
        axios
            .post('http://127.0.0.1:8000/api/',
                this.article
            )
            .then(response => {
                response.data.article = null;
                this.fetchArticles();
            })
            .catch(error => console.log(error))
    },
    deleteArticle(artcl) {
        if (confirm('Delete ' + artcl.title)) {
            axios.delete(`http://127.0.0.1:8000/api/${artcl.id}`)
                .then(response => {
                    this.fetchArticles();
                    return response;
                });
        }
    }
},