Как сделать простую систему upvote / downvote (vuejs / firebase)?

Question

Здравствуйте, и извините, если вопрос слишком очевиден, но я начинаю с этого и схожу с ума.

Я пытаюсь, чтобы пользователь мог проголосовать и удалить свой голос за элемент, опубликованный другим пользователем ната же кнопка, в основном в поисках такой функциональности, как твиттер, мне удалось заставить ее голосовать, но мне не удалось удалить голос.

Кодовая часть с 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>

Но троичный оператор работает только с первым щелчком, я не могу заставить работать второй!