Vue: асинхронные данные не перерисовываются

Question

Я совершенно новичок в Vue.js из Angular.Я пытаюсь загрузить asyncData и отобразить его так:

<template>
    <section>
        <h1 v-for="employee in employees" v-bind:key="employee.name">    {{employee.name}}</h1>
    </section>
</template>

<script>
import { db } from '../firebase.js'
import { Employee } from "../models/employee.js";
import { Entry } from "../models/entry.model.js";

export default {
    data: function() {
        return { employees: [] };
    },
    created: function() {
        this.loadEmployees();
    },
    methods: {

        loadEmployees: function() {
            db.collection('Employees').get().then(
                (snapshots) => {
                    for (const doc of snapshots.docs) {
                        const e = new Employee(doc.data().name, doc.data().worktimes);
                        e.id = doc.id
                        this.employees.push(e);
                    }
                }
            )
        },
    }
}
</script>

Мне кажется, что это просто, но v-for не будет отображать данные после загрузки.Есть ли что-то, что мне нужно знать о данных vue и async, которых я не знаю?Я не мог найти ничего полезного.

Answer 1

Вы перезаписываете весь массив сотрудников на каждой итерации for (const doc of snapshots.docs). Удалите локальное объявление employees из цикла и переназначьте в конце.

{
  loadEmployees: function() {
    db
      .collection('Employees')
      .get()
      .then(snapshots => {
        const employees = [];
        for (const doc of snapshots.docs) {
          const e = new Employee(doc.data().name, doc.data().worktimes);
          e.id = doc.id
          employees.push(e);

        }
        this.employees = employees;

        /*
         * As an alternative, you could just use .map()
         * which creates the new array, pushes to it,
         * and assigns all in one compact function
         */
        this.employees = snapshots.docs.map(doc => {
          const {
            name,
            worktimes
          } = doc.data();
          const e = new Employee(name, worktimes);
          e.id = doc.id;
        });
      })
  }
}