Real-time Firestore Updates in Vue's Listener

Struggling to set up a Firestore listener for real-time updates? Check out this snippet of code I'm working with:

db.collection('users/user')
    .onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        if (change.type === "added") {
          console.log("New user: ", change.doc.data());
        }
        if (change.type === "modified") {
          console.log("Modified user: ", change.doc.data());
          const data = {
            id: change.oldIndex,
            name: change.doc.data().name,
            surname: change.doc.data().surname
          };
          vm.users.push(data);
        }
        if (change.type === "removed") {
          console.log("Removed user: ", change.doc.data());
        }
      });
    });

Strange how the page doesn't reflect changes when the "modified" event occurs, but the console shows the updated data. Any ideas on how to tackle this issue?

Answer №1

After reviewing the code snippet provided in this inquiry, it appears unclear how or where the `user` array is being constructed or utilized. Is it a `prop`, stored in `data`, or managed within a `state-container`?

Your listener functions seem to be functioning well since you are able to see your data displayed on the console. However, there seems to be a missing piece in terms of how to display this information on the front-end.

If you are utilizing Vuex state management, mutations would be the appropriate approach. `Props` may not persist after a page refresh, whereas using data or computed properties might be more suitable for real-time updates from Firestore.

If the data belongs to a specific component, consider revisiting the implementation with the use of the `this` keyword.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the contents of a textbox by editing the text as you type

Text within the text box follows this format: login -u username -p password When entering this text, I want to substitute 'password' with a series of '*'s equal in length. For example: 'login -u <a href="/cdn-cgi/l/email-prot ...

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

Eliminating blank elements from arrays using JavaScript

I'm looking for some assistance in deciphering the functionality of my code. I'm trying to create a function that will take a string as input and eliminate all letters, leaving only numbers behind. The goal is to have this function return an arra ...

Adding several entries into mysql with the assistance of php

I've been attempting to input multiple records into my database table, but every time I try, all I see are zeros(0) inserted into the fields. Here's what I attempted: I used a foreach loop for insertion, but unfortunately it doesn't seem to ...

Ways to personalize Angular's toaster notifications

I am currently utilizing angular-file-upload for batch file uploads, where I match file names to properties in a database. The structure of the files should follow this format: 01-1998 VRF RD678.pdf VRF represents the pipeline name RD represents the lo ...

Using HTML to load an image is not possible, as it can only be done using CSS

I am currently dealing with a CSS issue in my project. Here is the code snippet from my stylesheet: .Img{ background: url('../assets/Trump.png'); } Now, let's take a look at the corresponding HTML code: <div class="Img"> However, ...

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

Objective: Implement an iframe displaying a YouTube video with play/pause functionality for users. Issue: Unable to interact with main content, but works correctly when placed in Navigation or Footer components. Attempted Solutions: Explored various de ...

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

Unable to update user information immediately after signing up without refreshing the page (Using Next JS and Firebase)

I have been utilizing the Auth Provider for managing my Firebase authentication details. My goal is to access currentUser immediately after signing up, but it seems that it requires a page reload for it to be set. I attempted to call setCurrentUser outsid ...

Maintain the app's data continuity even as I switch between different pages and return

I'm currently using React and Next.js in conjunction with Firestore. As I fetch data from Firebase on one page using useEffect once the page is rendered, I've noticed that the read operation can be resource-intensive. To avoid unnecessary fetchin ...

Headers can't be set after they have been sent. This issue arises when calling create(data,cb) function

I am a beginner in Node.js and I am attempting to create a model in MongoDB. However, when I make a call to localhost:3000/a, I notice that the request is being sent twice in the console and I am encountering an error stating "Can't set headers after ...

The printing code is not able to interpret the CSS

Having trouble with this script not reading the style properly when printing, can anyone assist in identifying the issue? <script type="text/javascript"> $(function () { $("#btnPrint").click(function () { var contents = $( ...

Attempted to fetch information using Ajax in Grails

I am attempting to utilize jQuery and ajax with the Grails framework to load the content registration page. However, upon loading the page, I am encountering an issue where the menu and registration fields are duplicated within the page. <script src ...

What is the method for inserting an icon using createElement?

Can someone help me figure out how to create a Material-UI icon using JavaScript? I am currently using the Material-UI-icon library. import ThumbUpIcon from '@material-ui/icons/ThumbUp'; var thumbsup = document.createElement(ThumbUpIcon); Any ...

Calculate the unique UV coordinates for a custom Buffer Geometry in THREE.JS

I am currently working on creating a curved wall using a vertices array in three JS. The array contains some base vertices in 2D which represent the bottom vertices of the wall. These vertices include the center, lower, and upper points, making it a two-fa ...

I am struggling to make callback functions function properly with an ajax GET request

I'm struggling to extract specific elements from a JSON file retrieved from an external REST API and store them in a local dictionary variable for use in my JavaScript code. While my AJAX GET request is successful, I'm facing an issue where I can ...

When using Vue-apollo, the queries are not functioning properly and are resulting in a 400 Bad Request error

I am currently in the process of developing a frontend using Vue cli and a backend with Django integrated with Graphene. At the moment, I am facing an issue where my mutations are working perfectly fine, but the queries seem to encounter some problems. In ...

Working with Firebase cloud functions: Updating nodes

I'm integrating Firebase cloud functions into my application to track user likes. Each time a user likes a video, their ID is saved along with a boolean parameter (true). Here's an example: https://i.sstatic.net/rnqH1.png Within the Firebase c ...

Why is the 'name' property used in the export default{} syntax?

Vuejs is my current learning focus, and one thing that puzzles me is the necessity of this particular name. <template> </template> <script> export default { name: 'NotFound' } </script> <style> </style&g ...