vue js auto update data after 'POST' / 'DELETE' / 'PUT' request | vue js 2

Question

Every time when I make a 'POST' or 'DELETE' request, I don't get the updated data automatically. But get the updated data after reloading. Is there any simple way to get updated data after any 'POST' / 'DELETE' / 'PUT' request ?

How would I go about implementing this?

And I am new in vue js.

here is my code

template

// 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>

script

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>

Sina · Accepted Answer · 2020-10-15 20:04:30Z

1

You only fetch articles on mounted cycle. so you can move these lines of code into a method and fetch articles whenever needed.

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

edited Oct 15, 2020 at 20:04

answered Oct 15, 2020 at 16:50

Sina

1,1451 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AbuMus'ab Over a year ago

but it is not auto updating in 'DELETE' request and again it's need to reload to get updated data.

AbuMus'ab Over a year ago

finally it's working. I removed this.all(); in deleteArticle(artcl)

Collectives™ on Stack Overflow

vue js auto update data after 'POST' / 'DELETE' / 'PUT' request | vue js 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related