async fetch() {
try {
console.log(await this.$api.events.all(-1, false)); // <-- Logging the first statement
const response = await this.$api.events.all(-1, false); // <-- Assigning the result
console.log(response); // <-- Logging the second statement
if (!this.events) {
this.events = []
}
response.data.forEach((event, index) => {
const id = event.hashid;
const existingIndex = this.events.findIndex((other) => {
return other.hashid = id;
});
if (existingIndex == -1) {
this.events.push(events);
} else {
this.events[existingIndex] = event;
}
});
for (var i = this.events.length - 1; i >= 0; --i) {
const id = this.events[i].hashid
const wasRemoved =
response.data.findIndex((event) => {
return event.hashid == id
}) == -1
if (wasRemoved) {
this.events.splice(i, 1)
}
}
this.$store.commit('cache/updateEventData', {
updated_at: new Date(Date.now()),
data: this.events
});
} catch (err) {
console.log(err)
}
}
// Other functions that may provide some insights
async function refreshTokenFirstThen(adminApi, func) {
await adminApi.refreshAsync();
return func();
}
all(count = -1, description = true) {
const func = () => {
return $axios.get(`${baseURL}/admin/event`, {
'params': {
'count': count,
'description': description ? 1 : 0
},
'headers': {
'Authorization': `Bearer ${store.state.admin.token}`
}
});
}
if (store.getters["admin/isTokenExpired"]) {
return refreshTokenFirstThen(adminApi, func);
}
return func();
},
Two different results are obtained when logging both statements, even though the expected result should be the same. This discrepancy only occurs when using the function in this specific component. In other components, everything works as intended.
First set of data:
[
{
"name": "First Name",
"hashid": "VQW9xg7j",
// correct attributes
},
{
"name": "Second name",
"hashid": "zlWvEgxQ",
// correct attributes
}
]
The output from the second console.log displays:
[
{
"name": "First Name",
"hashid": "zlWvEgxQ",
// correct attributes with reactiveGetter and reactiveSetter
<get hashid()>: reactiveGetter()
length: 0
name: "reactiveGetter"
prototype: Object { … }
<prototype>: function ()
<set hashid()>: reactiveSetter(newVal)
length: 1
name: "reactiveSetter"
prototype: Object { … }
<prototype>: function ()
},
{
"name": "Second name",
"hashid": "zlWvEgxQ",
// correct attributes without reactiveGetter and reactiveSetter
}
]
An unexpected change in the value of the hashid attribute occurs during assignment of the function call response.
Furthermore, the object where the hashid field changes also receives reactiveGetter and reactiveSetter, unlike the second object in the array.
This behavior raises questions about the nature of the assignment operations or a potential interaction with Vuex store. When using the same function elsewhere, the Vuex store remains unaffected.
The backend consistently provides accurate data, consisting of an array with two objects and specific attributes. No additional data is anticipated beyond these two objects.
If anyone can shed light on why this irregular behavior is observed, it would greatly help to understand the underlying cause.