vue chat app doesnt show data after mount

Question

I'm messing around with a few vue chat libraries and I have this 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>

Basically I have a firestore index where I store my users and on mount hook I populate the users array but for some reason vue does not see the data. Any ideas?

If I console.log the data I can see the data in the console.

can you confirm that `data.forEach` callback is running? also, please add vuejs2 or vuejs3 tag as appropriate - also, you should be able to do just `this.users = data` — Jaromanda X, Jul 05 '22 at 12:34
nevermind ... I see the issue do `
{{ users[0] }}
`, you don't need `this` in the template - however `this.users = data` is all you need — Jaromanda X, Jul 05 '22 at 12:36
confirm that `this.users[i] = user` is run at least once - i.e. `console.log(user)` in that `.forEach` and *check your browser developer tools console* — Jaromanda X, Jul 05 '22 at 12:39
just changed to ```this.users = data``` and it worked... Thanks! although, why doesn't it run with the foreach? The foreach is working I am seeing every iteration — Áron Pop Adorján, Jul 05 '22 at 12:41
@JaromandaX There's no mystery. The reactivity isn't triggered in V2 for direct array index access. — Estus Flask, Jul 05 '22 at 12:59

score 0 · Answer 1 · answered Jul 05 '22 at 12:58

The assignments of array elements by index are not reactive in Vue 2. The reactivity can be triggered by the use of Vue.set, or array methods like push, e.g.:

  data.forEach((user, i) => {
    Vue.set(this.users, i, user);
  });

Since an array needs to be fully replaced, a correct way is to replace the whole array with the result, as it has been already suggested in comments:

firestoreService.getAllUsers().then(({ data }) => {
  this.users = data
})

vue chat app doesnt show data after mount

1 Answers1