我基于Vue.js开发了一个小型Web应用程序,使用Firebase来存储和同步数据。我存储 items
(例如具有属性title和subtitle的)和带有属性listitems的lists
,其中存储了由Firebase生成的items
的键数组。结构如下:
现在的问题是:我想显示一个列表并展示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
中的条目迭代整个项目列表两次。
我的问题是:是否有更有效的方法将实际对象映射到对象键列表?对于大量项目记录,我的方法会非常慢。也许我只是太糊涂,看不到更简单的解决方案?
感谢您的时间!