I have an issue with a vue component not rendering data

Question

I am retrieving data in two steps. All data can be viewed in the Vue dev tools but data retrieved in the second step is not rendered.

My code is as follows:

    data() {
            return {
                activeEmployees: {},
            }
        },
     methods: {
            loadEmployees() {
                axios.get("/api/organizations/employees/" + this.$route.params.organizationId)
                    .then(({data}) => (
                        this.activeEmployees = data.active_employees
                    ))
                    .then(() => (
                        this.getUserServices()
                    ));
            },
            getUserServices() {
                for (const element of this.activeEmployees) {
                    axios.get("/api/organizations/employees/services/" + element.id + "/" + this.$route.params.organizationId)
                        .then(response => Object.assign(element, response.data));
                }
            },
        },
        mounted() {
            this.loadEmployees()
        }

The data from the getUserServices method (user_services as per screenshot below) is not rendered yet it appears in the Vue dev tools.

Part of the template is as follows:

       <tr :key="employee.id" v-for="employee in activeEmployees">
            <td class="text-center">
                <Avatar :userData="employee"/>
            </td>
            <td>
                <div>{{employee.name}}</div>
                <div class="small text-muted">
                    Registered: {{employee.created_at | formatDate}}
                </div>
            </td>
            <td>
                    {{employee.user_services}}
            </td>


        </tr>

And a snapshot of the Vue dev tools is as follows:

The user_services is empty in the view yet available in the dev tools.

How can this be refactored to render all data?

Answer 1

You should use the $set method somewhere to make your data reactive. For example:

axios.get("/api/organizations/employees/services/" + element.id + "/" + this.$route.params.organizationId)

.then(response => {
  Object.keys(response.data).forEach(key => this.$set(element, key, response.data[key])
 })