每当在 VUE JS（Quasar 框架）中点击通知按钮时，都会在通知列表中呈现重复数据

Question

每当我点击通知时，相同的数据会多次呈现，我想清空变量或列表然后重新呈现它，但它没有发生。请帮我 ！以下是正在发生的事情和我正在使用的代码的证据：

Duplicate data rendering

<q-list
 bordered
 style="background: white"
 v-for="(item, id) in notifications"
 :key="id">

export default {
    computed: {
        notifications: {
            get() {
                return this.$store.state.notification.notifications;
            },
            set(value) {
                this.$store.commit("notification/setValue", {
                    key: "notifications",
                    value: value
                });
            }
        }
    },
    async created() {
        let that = this;
        var notification_snap1 = await this.$db.collection("notifications")
            .where("receiver", "==", this.$q.localStorage.getItem("user_id"))
            .orderBy("time", "desc").get();
        notification_snap1.docs.forEach(doc => {
            that.notifications.push({...doc.data(), id: doc.id
            });
        });
    }
}

Answer 1

问题是您没有刷新通知数组，这导致了重复记录。

尝试在 foreach 之前添加以下代码行

that.notifications = []

这将使它起作用。