我正在使用 onSnapshot 在 Vue 中监听实时更新。我可以看到数据正在从 onSnapshot 加载,但它没有在 DOM 中更新。这可能只是一个非常愚蠢的错误,我只编程了大约一个多月,我就是不明白一些事情,而且我的谷歌搜索技巧让我失望。浏览器显示“No State Listed”,而不是来自 DB 和 console.log 的实际值。
这是我的 .Vue 文件中的片段。
<div>
<span class="grey--text">State:</span>
<span class="grey--text">{{ state }}</span>
</div>
export default {
components: { VoterRegistration },
data() {
return {
state: "No State Listed"
};
},
methods: {},
created() {
auth.onAuthStateChanged(user => {
if (user) {
db.collection("users")
.doc(user.uid)
.onSnapshot({ includeMetadataChanges: true }, function(doc) {
console.log(doc.data()); // shows all the data I want
this.state = doc.data().state;
console.log(this.state); //this shows correct value in firestore db …Run Code Online (Sandbox Code Playgroud)