https://i.sstatic.net/n5RaQ.png
Purpose of vue.js components
- The main objective of the DataTable component is to display data from the backend database.
- The primary function of the NewDataPanel.vue component is to add new data to the backend database.
Desired functionality
After creating new data using the NewDataPanel, it should be visible in the backend database as well as in the DataTable component.
Issue at hand
Although new data is successfully added to the backend database, there is a problem with refreshing the DataTable component.
Following the required sequence of methods:
this.$store.dispatch('postResult')
this.$store.dispatch('getResult')
it was expected that newly added data would first be created and then all data would be retrieved from the backend. This should result in a mutation of 'the store' to display the refreshed data in the DataTable component.
However, after adding the first data element, nothing changes in the DataTable. It is only after adding a second data element that the first one becomes visible.
How can I implement DataTable refreshment after adding new data?
P.S.: Sources and components diagram can be found below.
DataTable.vue
export default {
// ...
computed: {
// ...
...mapGetters(['resultTable'])
// ...
}
// ...
beforeMount () {
this.$store.dispatch('getResult')
}
}
NewDataPanel.vue
export default {
// ...
methods: {
// ...
addData () {
// ...
this.$store.dispatch('postResult')
this.$store.dispatch('getResult')
// ...
}
// ...
}
// ...
}
The vuex store's actions interact with Django Rest Framework via an API:
postResult: sends JSON to the backend for saving data
getResult: fetches a list of serialized objects and updates the state.resultTable with that data
vuex' store.js
actions = {
getResult ({commit}, payload) {
Result.getResult(payload).then(result => {
commit(GET_RESULT, {result})
})
},
postResult ({commit}, payload) {
Result.postResult(payload)
}
}