更新 DOM 中的子值

Question

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

数据库结构如下：

app的初始状态如下：

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 的值，以便我可以使用它来引用节点并使用上面的代码更新 likes 的值？
我怎么知道在数据库中更新了哪些状态的点赞以及该特定状态在状态[]中的位置，因为状态[]被新状态添加？

Answer 1

嗯，我不知道 vue.js，但纯粹 Javascript 应该是这样的：

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

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

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

Answer 2

对于问题 1：您需要将每个项目的密钥保存在 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
    });

更新 DOM 中的子值

Updating child values in DOM

javascript

firebase

firebase-realtime-database

vue.js

vuex