Firebase的更新功能落后于浏览器上的按钮单击 [英] Firebase's update function lags behind button click on browser

问题描述

我正在尝试使用Firebase在Vue中创建一个实时投票应用程序，以存储投票数.我能够创建数据库并增加投票数，并显示从数据库到我的应用程序的最新投票.但是，当我单击按钮以将投票数更新一时，投票只会在浏览器中增加，而不会在firebase上增加.

I am trying to create a real time voting app in Vue using firebase to store the number of votes. I am able to create the data base and increment the number of votes, as well as display the most up to date votes from the database to my application. However, when I click my button to update the number of votes by one, the vote is only increased in the browser and not on firebase.

我使用更新功能不正确吗?

Am I using the update function wrong?

...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
      }
    }

推荐答案

您需要执行以下操作:

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

---

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

这篇关于Firebase的更新功能落后于浏览器上的按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！