Recently embarking on the Vue and Vuefire journey, I am experimenting with creating dynamic links to different pages using unique keys as URL IDs.
The database reference is configured as
let db = app.database();
const postsRef = db.ref('posts');
To incorporate global references into my app page, I am importing them in this manner -
firebase: {
posts: {
source: postsRef,
asObject: true,
readyCallback: function () {
console.log(postsRef)
}
},
},
Iterating through the posts object can be achieved like so -
<div v-for="post in posts">
<a :href="'post/' + post.key"></a>
</div>
This is how my database is structured: DB Structure
What would be the most efficient way to utilize the key value without resorting to URL Params when accessing the posts page? Upon logging the postsRef object, it appears that the parent value is null while the key value is 'posts'. My goal is for the key value to fetch the unique ID of each element within the loop.