Update data without refresh the page with Vue and axios-CodePudding

I have a page with 2 tabs (Questions and Data) made on Vue and Axios. In first Tab, I fill the form and submit it - 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 the 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 answers in Questions Tab my list in Data Tab should change automatically. It changes if I refresh the page - mounted() works. I tried to create updateList() function:

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

and added it to save() function like:

    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 other second time (sometime works sometimes not). So I just added location.reload(); to save() but I don't like this approach. Is it possible to update Data list without refreshing the page? What am I doing wrong with updateList() function?

CodePudding user response：

In my opinion here you should use vuex and its getters.

You would then have only one request in all the application and the data would be automatically refreshed once updated in the state.

You can then access the data using a computed property which will be automatically re-rendered when the state is updated.

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

In this example, i'm loading posts information through the JsonPlaceHolder API.

Every time the form is re send (using a function). The action of the store is called, then the state is updated which trigger the getter to re-render the data.

Note: i'm loading the first post into the mounted with a default value of 1 here.

CodePudding user response：

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

}

You have re rendered issue I think can can you try above solution

CodePudding user response：

I think this might be helpful. Try to implement something like following.

async function() {
try{
  await axios.post() // or any request

  //action if success
  //another action if success
  ...

} catch(error) {
  //do something with error.
  console.log(error)
}