Firebase的更新功能滞后于浏览器上的按钮点击

Question

我正在尝试使用firebase在Vue中创建一个实时投票应用程序来存储票数。我可以创建数据库并增加投票数，还可以将数据库中的最新投票显示到我的应用程序中。然而，当我点击按钮将投票数更新一时，投票只会在浏览器中增加，而不会在firebase上增加。

我用错更新功能了吗？

...methods:{
upVotePingu() {
let pingu = db.collection('canidates').doc('pingu')
// Atomically increment the population of the city by 50.
pingu.set({
votes: this.pingu.votes++
})
console.log('voted')
}

...mounted(){
db.collection('canidates')
.get()
.then(query => {
query.forEach(doc => {
const dbVote = {
vote: doc.data().votes
}
this.pingu.votes = dbVote.vote
console.log(this.pingu.votes)
})
})

<button @click="upVotePingu">Vote</button>

data() {
return {
pingu: {
votes: 0
}
}

Answer 1

您需要执行以下操作：

this.pingu.votes++
pingu.set({
votes: this.pingu.votes
})

---

此外，请注意，要增加字段的值，使用FieldValue.increment更安全，请参阅https://firebase.googleblog.com/2019/03/increment-server-side-cloud-firestore.html和https://firebase.google.com/docs/reference/js/firebase.firestore.FieldValue#static-增量