在DOM中更新子值

我使用vuejs爲應用程序和firebase爲數據庫服務。在DOM中更新子值

數據庫結構看起來如下：

的應用程序的初始狀態如下：

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

當應用程序被創建的事件在created()生命週期鉤觸發的fullowing從火力取的狀態，並將其添加到上述的初始狀態下的數組：

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的值，以便我可以使用它來引用節點並使用上面的代碼更新喜歡的值？
我怎麼知道哪些狀態的喜好在數據庫中得到了更新，以及特定狀態在狀態[]中的位置，因爲狀態[]會被新狀態添加？

來源

2017-04-12 rv krish

我不知道我是否正確。當您在數據庫中進行任何更改時，您想要在屏幕上更改這些值。會是這樣嗎？ –

@LucasTorres yup，你說得對，那就是我想要的 –

用'deep：true'嘗試'觀看'https://vuejs.org/v2/api/#vm-watch – wostex

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

來源

2017-04-13 07:25:13

使用事務ti寫入數據庫正在工作gud ,,,第二部分困惑我....非常感謝你 –

好了，不知道vue.js，但在純JavaScript這將是這樣的：

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

裏面你ref.on('value', function(snap){})您將映射，直到你到達child「喜歡」，並把在變量value例如和值：

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

來源

2017-04-12 10:34:10

是的，我知道，因爲職位是在陣列如何知道哪些喜歡更新，因爲我不知道在哪裏發佈將在陣列中的時間點 –

在DOM中更新子值

回答

相關問題