javascript - 更新 DOM 中的子值

Question

我使用 vuejs 作为应用程序，使用 firebase 作为数据库服务。

数据库结构如下:

应用程序的初始状态如下:

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

创建应用程序时，created() 生命周期 Hook 中会触发以下事件，该 Hook 从 Firebase 获取状态并将其添加到上述初始状态的数组中:

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

} 

现在，使用填充了上面触发的事件的数组，我使用以下模板用状态填充页面:

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

所以现在我面临的问题是

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

• 如何获取 statusKey 的值，以便我可以使用它来引用节点并使用上述代码更新 Likes 的值？

• 由于状态 [ ] 会被新状态添加，因此我如何知道数据库中哪些状态的点赞已更新以及该特定状态在状态 [ ] 中的位置？

Answer 1

对于 q1:您需要将每个项目的键保留在 HTML 中，然后在用户单击它时将其传递到 updateLikes() 中。可能using a transaction :

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

对于 q2:监听 child_changed 事件，该事件在子项数据更改时触发。鉴于您已经在 q1 的答案中保留了每个项目的 key ，您现在可以在 HTML 中查找需要更新的元素:

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