Vue:未重新呈现异步数据
Vue:未重新呈现异步数据
提问于 2018-09-08 03:16:44
我对来自Angular的Vue.js完全陌生。我尝试加载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和异步数据有什么我不知道的地方需要知道吗？我真的找不到任何有用的东西。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-08 03:22:07
您在每次迭代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;
});
})
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52228467
复制相关文章
相似问题
腾讯云开发者
