I'm currently working on a Vue real-time voting app that uses Firebase to store the vote count data. I've successfully set up the database, incremented the number of votes, and displayed the most recent data in my application. However, I encountered an issue where clicking the button to update the vote count by one only changes it within the browser and not in Firebase.
Could it be that I'm utilizing the update function incorrectly?
...methods:{
upVotePingu() {
let pingu = db.collection('candidates').doc('pingu')
pingu.set({
votes: this.pingu.votes++
})
console.log('voted')
}
...mounted(){
db.collection('candidates')
.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
}
}