[Vuejs]-Array is duplicated when pushing an object, it also returned in a proxy in console

by

0👍

Whenever your onSnapshot listener gets called it gets a QuerySnapshot with the full data from messageRef. So when it gets called a second time, it again contains that full data and not just the changes.

You’ll either want to process snapshot.docChanges, which only contains the changes, or (simpler) you should clear your this.messages when you get called again.

That can be as simple as:

onSnapshot(messageRef, (snapshot) => {
  this.messages = snapshot.docs.map((doc) => doc.data().messageInfo);
})

Leave a comment