Use Vue and axios to update data without refreshing the page

Question

I have a page with 2 tabs (Questions and Data) made on Vue and Axios. In the first tab I fill out the form and submit - save button v-on:click="save".

save: function() {
                axios({
                        method: 'patch',
                        url: url,
                        data: this.data
                    })
                    .then(function (response) {
                        this.data = response.data;
}

In the second tab (Data) I have a list of saved data:

mounted() {
        axios
            .get('/api/recommended-products/?patient_uuid=' '{{patient.uuid}}')
            .then(response => (this.data= response.data.results))
       }

Now when I change the answer in the Questions tab, the list in the Data tab should change automatically. If I refresh the page it changes - Mounted() works. I tried creating the updateList() function:

updateList: function() {
            axios
                .get('/api/recommended-products/?patient_uuid=' '{{patient.uuid}}')
                .then(response => (this.data= response.data.results))
}

and add it to the save() function, for example:

save: function() {
                axios({
                        method: 'patch',
                        url: url,
                        data: this.data
                    })
                    .then(function (response) {
                        this.data = response.data;
this.updateList();
}

The problem is that this way works the second time (sometimes it works and sometimes it doesn't). So I just added location.reload(); to save() but I don't like this approach. Is it possible to update the data list without refreshing the page? What am I doing wrong with the updateList() function?

Answer 1

In my opinion, you should use vuex and its getter.

This way you have only one request across all your applications and the data is automatically refreshed once the status is updated.

You can then access the data using a computed property, which will automatically re-render when the state updates.

---

The following is an example of using multiple tabs: https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

In this example, I load the post information through the JsonPlaceHolder API.

Resend the form each time (using function). Call the store operation and then update the state, thus triggering the getter to re-render the data.

Note: I loaded the first post into Mounted with a default value of 1.