Question

我使用Firebase开发了一个基于Vue.js的小型网络应用程序来存储和同步数据。我存储items（例如，使用属性 title 和 subtitle ）和lists存储属性 listitems ，其中数组存储items的密钥（由Firebase生成的密钥）。结构如下所示：

现在出现问题：我想显示一个列表并显示 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）键，就像你在“项目”中所做的那样，只有最关键的数据，所以你可以链接到完整的描述

Answer 2

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

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

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

2 个答案: