Отображение дублированных данных в списке уведомлений при каждом нажатии кнопки уведомления в VUE JS (структура Quasar)

Question

Одни и те же данные отображаются несколько раз, когда я нажимаю на уведомление, я хочу очистить переменную или список, а затем повторно отобразить их, но этого не происходит. пожалуйста, помогите мне ! Ниже приведено свидетельство того, что происходит, и код, который я использую:

Отображение дубликатов данных

<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 = []

Это сделает это работает.