Question

如果这个问题太明显了，您好，请问一下，但是我从这个问题开始，然后吓到我了。

我尝试让一个用户可以投票并从另一个用户在同一按钮上发布的项目中删除他的投票，基本上是在寻找诸如twitter的收藏夹之类的功能，我设法将其投票，但我没有成功取消表决。

带有upvote的代码部分（至少对我有用）如下：

import { mapState } from 'vuex'
const fb = require('../firebaseConfig.js')

export default {
    computed: {
        ...mapState(['userProfile', 'currentUser', 'items'])
    },
    methods: {
        upvoteItem(itemId, itemUpvotes) {
            let docId = `${this.currentUser.uid}_${itemId}`
            fb.upvotesCollection.doc(docId).get().then(doc => {
                if (doc.exists) { return }
                fb.upvotesCollection.doc(docId).set({
                    itemId: itemId,
                    userId: this.currentUser.uid
                }).then(() => {
                    // actualizar item upvotes
                    fb.itemsCollection.doc(itemId).update({
                        upvotes: itemUpvotes + 1,
                    })
                })
            }).catch(err => {
                console.log(err)
            })
        },
    }
}

然后使用HTML进行投票（并显示计数器）：

<button @click="upvoteItem(item.id, item.upvotes)">{{ item.upvotes }}</button>

有什么前进的想法吗？

Answer 1

我已经尝试按照推荐的方式进行操作，但是我做得不好。

但是，我试图考虑其他替代方法。

我发现这很有趣（尽管出于某种原因我可能不知道这可能没有意义）。

1）创建时在项目中添加了“ upvoted：false”

2）添加了两种方法（一种用于投票，另一种用于投票）

methods: {
            upvoteItem(itemId, upvotes) {
                let docId = `${this.currentUser.uid}_${itemId}`
                fb.upvotesCollection.doc(docId).get().then(doc => {
                    if (doc.exists) { return }
                    fb.upvotesCollection.doc(docId).set({
                        itemId: itemId,
                        userId: this.currentUser.uid
                    }).then(() => {
                        fb.itemsCollection.doc(itemId).update({
                            upvotes: upvotes + 1,
                            upvoted: false
                        })
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            downvoteItem(itemId, upvotes) {
                let docId = `${this.currentUser.uid}_${itemId}`
                fb.upvotesCollection.doc(docId).get().then(doc => {
                    if (doc.exists) { return }
                    fb.upvotesCollection.doc(docId).set({
                        itemId: itemId,
                        userId: this.currentUser.uid
                    }).then(() => {
                        fb.itemCollection.doc(itemId).update({
                            upvotes: upvotes - 1,
                            upvoted: true
                        })
                    })
                }).catch(err => {
                    console.log(err)
                })
            },

3）单击三元运算符

<button @click="item.upvoted ? downvoteItem(item.id, item.upvotes) : upvoteItem(item.id, item.upvotes)">{{ item.upvotes }}</button>

但是三元运算符仅适用于第一次单击，而第二次单击则无法使用！

如何制作简单的upvote / downvote系统（vuejs / firebase）？

1 个答案: