[Vuejs]-Vue: Async Data is not being rerendered

by

3👍

✅

You’re overwriting the entire array of employees every iteration of for (const doc of snapshots.docs). Move the local declaration of employees out of the loop and reassign at the end.

{
  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;
        });
      })
  }
}
👤zero298

Leave a comment