更新 DOM 中的子值

Question

我将 vuejs 用于应用程序，将 firebase 用于数据库服务。

数据库结构如下：

应用的初始状态如下：

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

创建应用时，在 created() 生命周期钩子中触发充分事件，该钩子从 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 的值，以便我可以使用它来引用节点并使用上述代码更新 like 的值？

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

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 的答案中保留了每个项目的密钥，您现在可以在 HTML 中查找需要更新的元素：

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

Answer 2

好吧，一个不知道 vue.js，但是在纯 Javascript 中会是这样的：

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

在您的ref.on('value', function(snap){})中，您将映射直到到达child“喜欢”并将值放入变量value，例如：

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