Javascript Vue.js：如何将密钥列表映射到Firebase对象？

我开发了一个基于Vue.js的小型web应用程序，使用Firebase存储和同步数据。我存储

项

（例如，带有属性title和subtitle）和

列出带有属性listitems的
，其中存储了
项
的一组键（从Firebase生成的键）。结构如下所示：


现在的问题是：我想显示一个列表并显示listitems属性中的项目，我是这样做的：

内容：

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
        };
    }
});

<!-- 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>

模板：

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
        };
    }
});

<!-- 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>




{{item.title}


没有物品。

如您所见，我必须使用两次迭代，其中迭代
list.items
中每个条目的完整项目列表

我的问题是：有没有更有效的方法将实际对象映射到对象键列表？对于大量的项目记录，我的方法将非常缓慢。也许我太盲目了，看不到更简单的解决方案

谢谢你的时间
 我认为你必须去规范化/复制那里的一些数据。我也遇到过类似的情况，这段Firebase视频为我澄清了很多事情：（链接更新到2:22的段落。顺便说一句，整个意甲都值得一看。）

我想在“listitems”中添加（Firebase）键，就像您在“items”中所做的那样，其中只包含最关键的数据，这样您就可以链接到完整的描述
您的数据是只读的吗？在这种情况下，您可以将筛选逻辑从模板移动到数据模块，如下所示（我希望我会有意外的副作用）：

通过快速扫描，我不认为它已经建立了加入这些数据的支持。@FrankvanPuffelen:是的，似乎是这样。无论如何谢谢你！我正在寻找一个解决方案，我不必复制数据-数据库中的重复数据很难维护。好主意。这里的问题是，您不能使用
items[key]
，因为
items
是项对象的简单列表。项对象将键作为单独的属性。items数组类似于此：
items=[{“a”：“…”，“.key”：“.key”}，{“a”：“…”，“b”：“…”，“.key”：key}，…]