Updating child values in DOM

Question

I use vuejs for the app and firebase for the database services.

The database structure looks as below:

The initial state of the the app is as follows:

const state :{
    newStatus: [],
    statuses: [],
    initialStatusFetched: false
}

When the app is created the fullowing events are triggered in the created() lifecycle hook which fetch the statuses from the firebase and add it to the arrays in the initial state mentioned above:

created(){
    //fetches initial status and adds it to statuses[ ]
    function fetchStatus() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses").once('value', (snapshot) => {
            snapshot.forEach((childSnap) => {
                let childKey = childSnap.ke;
                let childData = childSnap.val();
                let statusData = {
                    key: childKey,
                    statusVal : childData
                }
                state.statuses.unshift(statusData);
                state.loader = false;
                state.initialStatusFetched = true;
            });
        });
    };

    //fetches newly added status and adds it to newStatus[ ]
    function statusAdded() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses").on('child_added', function(status) {
            if(state.initialStatusFetched){
                let statusData = {
                    key: status.key,
                    statusVal: status.val()
                }
                state.newStatus.push(statusData);
            }
        });
    };

} 

Now using the arrays which gets filled with the events triggered above I populate the page with statuses using the following template:

<template>
    <div>
      <div>    
          <!--statuses-->
      <div v-for="status in statuses" class="media my-media"> 
          // ommitted all the un-important part
          <div class="media-body">

              <button @click="addlike(status.key, userStatus.loggedIn)" class="btn my-btn">Like</button>
            //displaying number of likes
              <span style="margin-right:20px">{{ status.statusVal.likes }}</span>
              <button @click="addDislike(status.key, userStatus.loggedIn)" class="btn my-btn">Disike</button>
            //displaying number of dislikes
              <span>{{ status.statusVal.dislikes }}</span> 

          </div>          
      </div>
      </div>
  </div>    
</template> 

so now the problem i am facing is

function updateLikes() {
        const ref = firebase.database().ref(); 
        ref.child("allstatuses/" + statuskey + "/likes").on('value', (snapshot) => {
            // hiw can I fetch the value os statusKey so i can use it above
            console.log(snapshot.val());
        });
    }; 

• how can I get the value of statusKey so I can use it to refer to the node and update the value of likes using the above code?

• how do i know which status's likes got updated in the database and where that particular status is in the statuses[ ] , since statuses [ ] gets on added by new statuses?

Answer 1

For q1: you'll need to keep the key of each item in the HTML and then pass that into updateLikes() when the user clicks on it. Probably using a transaction:

function updateLikes(statuskey) {
    const ref = firebase.database().ref(); 
    ref.child("allstatuses/" + statuskey + "/likes")
       .transaction(function(currentValue) {
         return (currentValue || 0) + 2
       });

For q2: listen for the child_changed event, which fires when the data of a child changes. Given that you already kept the key for each item in the answer for q1, you can now look up the element in the HTML that needs to be updated:

    ref.child("allstatuses").on('child_changed', function(status) {
        var statusElm = document.getElementById(status.key);
        ... update the HTML for the new status
    });

Answer 2

Well, a dont know vue.js, but in pure Javascript It would be something like this:

<div id="likes"></div>

Inside your ref.on('value', function(snap){})You will map until you reach the child "likes" and put the value in the variable value for example and:

let likes = document.getElementById('likes');
likes.innerHTML(value);