CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestore
Yosef Shalev
Yosef Shalev

Reputation: 25

updating a list on VueJS by using the real-time change-listener on firestore

I have a table with students list rendering by v-for loop from the backend. each cell is an input so I can edit it, though I want the changes to apear in real time for all of the users. but something in my code isn't working. If I open it in another tab, I still have to refresh to see the changes. in the console it looks like the changes are recieved on the new tab too. here is my code:

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

          })

Upvotes: 0

Views: 1192

Answers (2)

Hiws
Hiws

Reputation: 10334

Alternatively to Vue.set, you can use Object.assign, to fill your old object with new data without losing reactivity.

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)
    })
  })

Upvotes: 0

l1b3rty
l1b3rty

Reputation: 3642

Typical Vue reactivity issue, you should use this.$set on the last line

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)
    })
  })

More info bullet 1 here

Upvotes: 2

Related Questions