DOM

Question

に子の値を更新する私は、データベースサービスのためのアプリとfirebaseためvuejsを使用しています。

データベース構造は、以下のようになります。

次のようにアプリの初期状態は次のとおりです。

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

アプリが作成されるとfullowingイベントが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

：あなたが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イベントのために聞きます。すでに第1四半期のための答えの各項目のキーを保持することを考えると、あなたは今、更新する必要が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でそれはこのようなものになるだろう：あなたのref.on('value', function(snap){})あなたはchildに到達するまで、マップ「好き」と入れますインサイド

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

例えば、変数valueの値と：Q1については

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