Vuefire - get key within v-for loop

Question

I'm new to Vue and Vuefire. I am trying to create a dynamic link to a page using the key as the URL ID.

My reference is set up as

let db = app.database();
const postsRef = db.ref('posts');

and I'm importing the global refs into my app page like so -

firebase: {
  posts: {
    source: postsRef,
    asObject: true,
    readyCallback: function () {
      console.log(postsRef)
    }
  },
},

and iterating over the posts object like so -

<div v-for="post in posts">
  <a :href="'post/' + post.key"></a>
</div>

My database is structured like so - DB Structure

What would be the best way to use the key considering that I might want to retrieve at the posts page, preferably without using URL Params? When I log the postsRef object, I see that the parent value is null and the key value is posts. I want the key value to retrieve the unique ID of the element in the for loop.

Answer 1

So basically, removing the asObject: true and importing it as an array instead works for me. In my case, the key can be accessed as

post['.key']