Recently, I've been experimenting with different Vue chat libraries and encountered this interesting piece of code:
<template>
<p>{{ this.users[0] }}</p>
</template>
<script>
export default {
data() {
return {
users: []
}
},
mounted() {
firestoreService.getAllUsers().then(({ data }) => {
data.forEach((user, i) => {
this.users[i] = user
});
})
}
</script>
Essentially, I have a Firestore index where my user data is stored and upon mounting the component, I populate the users array. However, it seems like Vue is not recognizing the data. Any suggestions on what might be causing this issue?
If I use console.log to output the data, I can see that the data is indeed present in the console.