vue.js v-for not updating

Question

I'm new to Vue and I'm facing something I don't really understand :

First I'm fetching data from a DB to populate my users value.

Then, using the content of this users value I have a recursive function getting more data into it from another DB.

My issue comes from that moment, I get the values,(if I delete/paste the content of my child UserData component I can see the good values in the table) but if I refresh or just come to this page normally, firstname and lastnames values are missing. I think it has something to do with the v-for not updating but I'm not sure.

I've spent a lot of time reading documentation and other similar problem and still, I don't get it.

<template lang="pug">
  .wrapper
    Top
    h1 Users
    .table-wrap(v-if='users.length > 0')
      table
        tr
          td(width='150') email
          td(width='150') Type
          td(width='150') Last name
          td(width='150') First name
          td(width='150') Action
        UserData(v-for='user in users' v-bind:user='user' v-bind:key="user.id")
    div(v-else='')
      | There are no users.
</template>

<script>
import UsersService from '@/services/UsersService'
import UserData from '@/components/users/UserData'
import Top from '@/components/head/Top'

export default {
  name: 'users',
  components: {
    UserData,
    Top
  },
  data() {
    return {
      test: '',
      users: [],
      val: 0
    }
  },
  mounted() {
    this.isLogged()
  },
  methods: {
    async isLogged() {
      if (this.$cookie.get('session') === 'null' || this.$cookie.get('session') === null) {
        this.$router.push({ name: 'LoginUser' })
      } else {
        this.fetchUsers()
      }
    },
    async fetchData(val) {
      const res = await UsersService.getUserValues({
        id: this.users[val].extend
      })
      this.users[val].firstname = res.data.firstname
      this.users[val].lastname = res.data.lastname
      this.val = this.val - 1
      if (val > 0) {
        this.fetchData(this.val)
      }
    },
    async fetchUsers() {
      const response = await UsersService.fetchUsers()
      this.users = response.data.results
      this.val = this.users.length
      this.fetchData(this.val - 1)
    }
  }
}
</script>

UserData component :

<template lang="pug">
  tr
    td {{ user.email }}
    td {{ user.type }}
    td {{ user.lastname }}
    td {{ user.firstname }}
    td(align='center')
      a(@click='this.value = true') more
</template>

<script>

export default {
  props: ['user']
}

</script>

Answer 1

Vue cannot detect changes when you modify an Array by directly setting an index, for example:

this.users[val].firstname = res.data.firstname
this.users[val].lastname = res.data.lastname

However, Vue provides a convenience method arr.$set(index, value), so try this instead:

...

let temp = this.users[val]
temp.firstname = res.data.firstname
temp.lastname = res.data.lastname

this.users.$set(val, temp)

...