I am currently utilizing a tech stack that includes Vue 3 with Composition API, a Pinia store, TypeScript, a SQL backend, and Fetch to retrieve data through my .NET 6 API.
Within my codebase, I have a User.ts class:
export default class User
{
userName: string | null
constructor (userName: string | null)
{
this.userName = userName;
}
}
I am fetching data from the database using the method below:
getAdminUsers(): void
{
fetch(apiURL + 'AdminUser',
{
headers:
{
"Accept": "application/json",
"Content-Type": 'application/json'
}
})
.then(response =>
{
return response.json();
})
.then(data =>
{
this.$patch((state) =>
{
state.adminUser = { userName: null};
state.adminUsers = [];
})
data.forEach((user: User) =>
{
if (user.userName)
{
this.adminUser = new User(user.userName.toUpperCase());
this.adminUsers.push(this.adminUser);
}
})
})
},
While I have had success with other data in my application, I am facing an issue where refreshing the page or running the getAdminUsers method from any part of my Vue app results in an empty array:
[[Handler]]: Object
[[Target]]: Array(0)
length: 0
[[Prototype]]: Array(0)
[[IsRevoked]]: false
Interestingly, making a small change to the app, like adding a space and saving/rebuilding, causes the array to be populated with the correct data:
Proxy {0: User, 1: User}
[[Handler]]: Object
[[Target]]: Array(2)
0: User {userName: 'GEORGE.SMITHSON'}
1: User {userName: 'TEST.2'}
length: 2
[[Prototype]]: Array(0)
[[IsRevoked]]: false
I am struggling to understand why this behavior is occurring and would greatly appreciate any assistance in resolving it.