Vue.js:如何将键列表映射到Firebase对象？

Question

我使用Firebase开发了一个基于Vue.js的小型网络应用程序来存储和同步数据.余存储items(例如,具有属性标题和字幕)和lists与属性listItems中,其中键阵列的(那些从火力地堡生成)items被存储.结构如下所示:

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

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

模板:

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

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

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

谢谢你的时间!

Answer 1

我认为你必须在那里对一些数据进行非规范化/重复。我也遇到过类似的情况，这个 Firebase 视频为我解决了很多问题：https://youtu.be/ran_Ylug7AE ?t=2m22s（链接更新为 2:22 的段落。顺便说一句，整个系列都值得观看。）

我的做法是在“listitems”中添加（Firebase）键，就像您在“items”中所做的那样，其中只有最关键的数据，以便您可以链接到完整的描述