обновление списка на VueJS с помощью слушателя изменений в реальном времени в firestore

Question

У меня есть таблица с рендерингом списка студентов v-for l oop из бэкэнда. каждая ячейка является входом, поэтому я могу ее редактировать, хотя я хочу, чтобы изменения отображались в реальном времени для всех пользователей. но что-то в моем коде не работает. Если я открою его на другой вкладке, мне все равно придется обновить sh, чтобы увидеть изменения. в консоли похоже, что изменения получены и на новой вкладке. вот мой код:

db.collection('students')
      .onSnapshot(snapshot=>{
        snapshot.docChanges().forEach(change=>{
          let doc = change.doc
          console.log('changed!');
          console.log(doc.data());
          let editedStudent = doc.data()
          let oldStudent = this.studentsList.filter(student=>{
            return student.studentID==editedStudent.studentID
          })
          oldStudent = oldStudent[0]
          console.log(editedStudent);
          console.log(oldStudent.firstName);
          console.log(doc.id);
          console.log(oldStudent);
          console.log(this.studentsList.indexOf(oldStudent));
          this.studentsList[this.studentsList.indexOf(oldStudent)]=editedStudent

          })    

Answer 1

Типичная Vue проблема с реактивностью, вы должны использовать this.$set в последней строке

db.collection('students')
  .onSnapshot(snapshot=>{
    snapshot.docChanges().forEach(change=>{
      let doc = change.doc
      console.log('changed!');
      let editedStudent = doc.data()
      console.log(editedStudent);
      let ioldStudent = this.studentsList.findIndex(student=> student.studentID==editedStudent.studentID)
      this.$set(studentsList, ioldStudent , editedStudent)
    })
  }) 

Подробнее пуля 1 здесь

Answer 2

В качестве альтернативы Vue .set , вы можете использовать Object.assign , чтобы заполнить старый объект новыми данными без потери реактивности.

db.collection('students')
  .onSnapshot(snapshot=>{
    snapshot.docChanges().forEach(change=>{
      let doc = change.doc
      let editedStudent = doc.data()

      let oldStudent = this.studentsList.find(student => 
        student.studentID === editedStudent.studentID
      )
      Object.assign(oldStudent, editedStudent)
    })
  })