CODEWITHSUNDEEP
javascriptvue.jsgoogle-cloud-firestorevuetify.js
Boron
Boron

Reputation: 129

VueJS refresh content after database operation

I'm using a v-data-table component to display data from firestore database. It looks something like this:

enter image description here

The approve/disapprove functionality works well, updating the firestore database with the below code: 

database
      .collection(member)
      .doc(userId)
      .update({
        approved: status
      })
      .then({
        console.log("School member details updated successfully")
          return this.teachers.filter(teacher => {
            return teacher.id != userId;
          });
      })
      .catch(err => {
        console.log(
          "An error occured trying to update the school member details:",
          err
        );
      });

However, after the content is updated successfully on firestore database I no longer want to show the list item, I thought filtering the array as I have done in the then() code block would work but its not.

How could I refresh the data for the client without reloading the whole page again?

Upvotes: 0

Views: 224

Answers (1)

Sarmad Ali
Sarmad Ali

Reputation: 122

You mentioned that you don't want to show the particular list Item after successful approved. As you used teacher.id != userId. Have you used teacher.id !== userId?

Upvotes: 1

Related Questions