I've encountered an issue with my Vuex getter that fetches data for the current route and displays it in a Vuetify v-data-table. Everything works perfectly fine when the component is initially created. However, when I add a new entry to the data array in the state that the getter interacts with, the new entry is only displayed after navigating away from the current route. I'm using the current route as a key to differentiate between entries in the state so that I can show different information based on the current route, utilizing Vue router. If my explanation is unclear (English is not my first language), here's some relevant code: The getter in question:
computed: {
...mapGetters({
geData: "geData"
}),
getAllData() {
return this.geData[this.$route.path];
}
}
The data table:
<v-data-table :headers="headers" :items="getAllData" hide-actions>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.state}}</td>
<td class="text-xs-left">{{ props.item.created_at }}</td>
<td class="text-xs-left">{{ }}</td>
</template>
</v-data-table>
This is how I update the array in the store mutation:
setNewData: (state, Data) => {
state.Data[Data[0]] = Data[1];
}
The first Data[0] represents the route used as a key, while the second Data[1] contains the new data. I suspect that the getter only updates when navigating away from the current route because of the usage of the route as a key. However, I'm unsure and do not know how to address this issue. Any ideas or suggestions would be greatly appreciated. Thank you in advance!