I am currently working on a compact web application using Vue.js and Firebase for data storage and synchronization. The app consists of storing 'items' with attributes like 'title' and 'subtitle', and 'lists' with an attribute 'listitems' that holds an array of keys generated from Firebase. The data structure is illustrated below:
https://i.sstatic.net/Uf3FG.jpg
Here's my dilemma: I need to display a list and show the items from the 'listitems' attribute using the following method:
Component:
var ShowList = Vue.extend({
template: '#show-list',
firebase: {
// fetch all items from firebase
items: firebase.database().ref('items')
},
data: function () {
// retrieve 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
};
}
});
Template:
<!-- display a list -->
<template id="show-list">
<ul v-if="list.items != ''">
<li v-for="key in list.items"> <!-- I want to avoid -->
<template v-for="item in items"> <!-- iterating through the whole items list -->
<span v-if="item['.key'] == key">
{{ item.title }}
</span>
</template>
</li>
</ul>
<div v-else>No items.</div>
</template>
As evident, my current method involves two iterations to map the actual objects to the list of object keys. With a large number of item records, this process becomes sluggish. Is there a more efficient way to accomplish this task without the need for multiple iterations? I would appreciate any insights or suggestions to simplify this process. Thank you for your input!