5

我使用 Firebase 开发了一个基于 Vue.js 的小型网络应用程序来存储和同步数据。我存储items（例如，使用属性title和subtitle）和lists属性listitems，其中items存储了一组键（从 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>

如您所见，我必须使用两次迭代，在其中迭代list.items.

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

谢谢你的时间！

4

2 回答 2

0

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

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

于 2017-01-03T21:04:19.670 回答
0

你的数据是只读的吗？在这种情况下，您可以将过滤器逻辑从您的模板移动到您的数据模块，就像这样（我希望我有意想不到的副作用）：

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));
    var items = firebase.database().ref('items')
    var activeItems = this.list.items.map(function(key) {
        return items[key]
    })
    return {
        activeItems: activeItems;
    };
}
于 2018-06-25T18:08:00.577 回答