Within my VueJS application, I have implemented an API call to retrieve user statistics for display. The process involves a straightforward Java backend and utilizing an $axios get request. Upon initial page load, everything functions as anticipated. However, upon navigating away from the page and returning or updating the content, the displayed values reset to 0.
I suspect that this issue stems from the DOM not being properly updated for some reason. Despite observing successful API calls in the "Network" tab of the developer tools, the data retrieved is not reflected on the page.
<template>
<div>
<h3>Users:</h3>
<v-container class="grey lighten-5">
<v-row
v-for="(d, index) in data"
:key="index"
no-gutters
>
<v-col>
<v-card
class="pa-2"
outlined
tile
>
{{ d.title }}
</v-card>
</v-col>
<v-col>
<v-card
class="pa-2"
outlined
tile>
{{ d.value }}
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
import {Component, Vue} from "vue-property-decorator";
@Component({
created() {
this.$accessor.users.loadNumOfNewUsers()
},
mounted() {
this.newUsers()
}
})
export default class ShowNewUsers extends Vue {
data = [
{ title: "New users:", value: -1 },
]
newUsers() {
Vue.set(this.data[0], "value", this.$accessor.users.newUsers);
}
}
</script>
The API calls, such as
this.$accessor.users.loadNumOfNewUsers()this.$accessor.users.newUsers, are directed towards my Java backend through the following code snippet, which seems to be operational without issues:
import {actionTree, getterTree, mutationTree} from "typed-vuex";
export const state = () => ({
newUsers: 0,
});
export type AdminState = ReturnType<typeof state>;
export const getters = getterTree(state, {
newUsers: (state: AdminState) => state.newUsers,
});
export const mutations = mutationTree(state, {
setNumOfNewUsers(state: AdminState, numOfNewUsers) {
state.newUsers = newUsers
}
});
export const actions = actionTree(
{state, getters, mutations},
{
async loadNumOfNewUsers({commit}) {
const numOfNewUsersUrl = '/api/my/java/backend'
await this.$axios.get(numOfNewUsersUrl).then((response) => {
commit('setNumOfNewUsers', response.data)
})
},
},
);
Considerations regarding potential use of the @Watch decorator arise, but my understanding suggests it is unnecessary for simple page reloading. Additionally, the unexpected conversion of the displayed value from -1 to 0 hints at a JavaScript anomaly, possibly involving NaN. At present, I am uncertain of the exact cause.