[Vuejs]-Getting a firebase object's key after it has been passed down as a prop in Vue

by

0👍

✅

I assume that your ‘thoughts’ object from the parent component contains the keys, and so looks like this:

thoughts: {
    key1: {
        title: title1,
        body: body1
    },
    key2: {
        title: title2,
        body: body2
    }
}

At least, this is how setting this.thoughts = snap.val() works when I tested.

When iterating through an object in Vue, you have access to the key of the item you are iterating, like this: v-for="(thing,k) in myObject. Now you can use k anywhere in the item to get the key. In your case, I would try

<ThoughtItem v-for="(thought,thoughtKey) in thoughts" :thought="thought" :thoughtKey="thoughtKey" />

Then you can accept thoughtKey as a prop in the child component and use it as you wish. Hope this works for you.

👤Shai

0👍

I don’t use Firebase, but assuming your “thoughts” array is an array of Firebase objects (or references), you probably just have to use this.thought.key in your method.

getThoughtKey() {
 firebase.database().ref().child(this.thought.key);
}
👤budgw

Leave a comment