gpt4 book ai didi

javascript - firestore onSnapshot 更新值,但不更新 VueJS 中的 DOM

转载 作者:行者123 更新时间:2023-12-05 00:58:51 24 4
gpt4 key购买 nike

我正在使用 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
});

this.loggedIn = true;
} else {
this.person = "User not logged in";
this.loggedIn = false;
}
});
}

最佳答案

你可以试试换成箭头功能吗?

db.collection("users")
.doc(user.uid)
.onSnapshot({ includeMetadataChanges: true }, (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
});

我认为 function(doc) 中的 this 不是 Vue 实例。

关于javascript - firestore onSnapshot 更新值,但不更新 VueJS 中的 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56122002/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com