I develop a small web-app based on Vue.js using Firebase to store and sync the data. I store `items` (e.g. with attributes *title* and *subtitle*) and `lists` with an attribute *listitems*, where an array of keys (those generated from Firebase) of `items` is stored. The structure looks like this:

[![enter image description here](https://i.stack.imgur.com/Uf3FG.jpg)](https://i.stack.imgur.com/Uf3FG.jpg)

Now the problem: I want to display a list and show the items from the *listitems* attribute and I'm doing it like this:

**Compontent:**

```
var ShowList = Vue.extend({
    template: '#show-list',
    firebase: {
        // get all existing items from firebase
        items: firebase.database().ref('items')
    },
    data: function () {
        // get list item keys of list 'list_id' and bind it to this.list
        this.$bindAsObject('list', listsRef.child(this.$route.params.list_id));
        return {
            list: this.list
        };
    }
});

```

**Template:**

```
<!-- show a list -->
<template id="show-list">
    <ul v-if="list.items != ''">
        <li v-for="key in list.items">        <!-- I would like to not being forced to -->
            <template v-for="item in items">  <!-- iterate the whole list of existing items -->
                <span v-if="item['.key'] == key">
                    {{ item.title }}
                </span>
            </template>
        </li>
    </ul>
    <div v-else>No items.</div>
</template>

```

As you can see, I have to use two iterations where I iterate the full items list for every entry in `list.items`.

My question: Is there a more efficient way to map the actual objects to the list of object keys? For a huge number of item records, my approach will be very slow. Maybe I'm just too blind to see a simpler solution?

Thanks for your time!