I have a VueJS app integrated with Firebase JSON database where I'm trying to implement a feature that allows users to update the vote count of a comment by clicking an arrow (similar to upvotes on this website). The function works properly, but the Vue Model fails to update Firebase, resulting in the loss of the updated vote count upon refreshing. You can find my code on CodePen: http://codepen.io/Auzy/pen/evowdd/ (Please note that I use Pug and Stylus for styling; click the arrow in the top right corner to view normal HTML/CSS).
JavaScript:
// Initialize Firebase
var config = {
databaseURL: "..."
};
const firebaseapp = firebase.initializeApp(config);
const db = firebaseapp.database();
const commentsRef = db.ref('test');
const app = new Vue({
el: '#app',
data: {
comments: [],
newComment: {
name: '',
comment: '',
votes: 0
},
},
methods: {
addComment() {
commentsRef.push(this.newComment);
this.newComment.name = '';
this.newComment.message = '';
this.newComment.votes = 0;
},
vote: function (voteType, comment) {
if (voteType === "up") {
comment.votes++
} else if (voteType === "down") {
if (comment.votes <= -10) {
return;
}
comment.votes--;
}
},
},
firebase: {
comments: commentsRef
},
})