How to look up the element in the HTML in the .vue file that needs to be updated: - vue.js

Question

You can consider me a toddler in the vuejs worlđ
In my app i fetch some posts that are present in firebase database
Each post has a upvote and downvote button just like stack overflow where users can upvote or downvote( it's completely u to them)
Eeverything like votes getting updated to databae and rest all works great*
Here comes the problem
Firebase provides a event listener for listening whenever there is change in each child i.e post (in my case upvotes. Downvotes)
i add this listener to the created() lifecycle hook so that the votes update when there is change in them by other users
here is the simplified code below of my .vue file
<template>
<div>
<div v-for="post in posts" id="post.key" class="container">
<p id="upvotes">{{ post.up}}</p>
<p id="downvotes">{{ post.down }}</p>
</div>
</div>
</template>
<script>
export default{
created:{
const ref = this.$firebase.database().ref();
ref.child("posts").on('child_changed', function(post) {
var upvotes = post.val().up;
var downvotes = post.val().down;
//how to look up the element in the HTML above that needs to be updated:
//if it were plain javascript we would have done something like this
//var postElm = document.getElementById(post.key);
//postElm.getElementById("upvotes").innerHTML = upvotes;
//postElm.getElementById("downvotes").innerHTML = downvotes;
});
}
}
</script>
My issue:
how to look up the upvotes and downvotes element in the HTML above in the template that needs to be updated:
according to the docs we can register a reference ref to an element but there is this note saying:
because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
so how can I reference the elements to update them

Answer 1

Update: Here is an example where I have mocked the firebase behavior. posts should be a data item, because you control its contents. computed items are for derived values based on other data or props items. You wouldn't make a computed based on a value external to Vue, because such values are not reactive.
const payloads = [{
val() {
return {
key: 2,
up: 10,
down: 3
};
}
},
{
val() {
return {
key: 1,
up: 3,
down: 10
};
}
}
];
new Vue({
el: '#app',
components: {
postVoter: {
template: '#post-voter-template',
data() {
return {
posts: [{
key: 1,
up: 0,
down: 0
},
{
key: 2,
up: 1,
down: 0
},
{
key: 3,
up: 0,
down: 1
}
]
}
},
created() {
const i = setInterval(() => {
if (payloads.length) {
console.log("Doing");
const post = payloads.shift();
const item = this.posts.find((p) => p.key === post.val().key);
item.up = post.val().up;
item.down = post.val().down;
} else {
console.log("Done");
clearInterval(i);
}
}, 1000);
}
}
}
});
.container {
display: flex;
justify-content: space-between;
width: 10rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<template id="post-voter-template">
<div>
<div v-for="post in posts" class="container">
<p id="upvotes">{{ post.up}}</p>
<p id="downvotes">{{ post.down }}</p>
</div>
</div>
</template>
<post-voter id="app"></post-voter>
You should be finding which data item needs updated, rather than trying to find it in the DOM. You don't say how posts is created or populated, so I'm having to surmise what it looks like. The code should go something like this:
<template>
<div>
<div v-for="post in posts" class="container">
<p id="upvotes">{{ post.up}}</p>
<p id="downvotes">{{ post.down }}</p>
</div>
</div>
</template>
<script>
export default{
created() {
const ref = this.$firebase.database().ref();
ref.child("posts").on('child_changed', (post) => {
const item = this.posts.find((p) => p.key === post.key);
item.up = post.val().up;
item.down = post.val().down;
});
}
}
</script>