Vue.js：実際のFirebaseオブジェクトにキーのリストをマッピングするには？

Question

Firebaseを使ってVue.jsに基づいて小さなWebアプリケーションを開発し、データを保存して同期します。私は保存items（例えば属性タイトルとサブタイトル有する）itemsのキーの配列（Firebaseから生成されたもの）が格納されている属性リストアイテム、ととlists。構造は次のようになります。

今問題：私はリストを表示し、リスト項目属性からアイテムを表示したいと私はこのようにそれをやっている：

Compontent ：

var ShowList = Vue.extend({ 
    template: '#show-list', 
    firebase: { 
     // get items from firebase 
     items: itemsRef 
    }, 
    data: function() { 
     // get list from firebase 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"> 
      <template v-for="item in items"> 
       <span v-if="item['.key'] == key"> 
        {{ item.title }} 
       </span> 
      </template> 
     </li> 
    </ul> 
    <div v-else>No items.</div> 
</template> 

ご覧のとおり、すべてのエントリの完全なアイテムリストを反復する2回の繰り返しを使用する必要があります。list.items。

私の質問：実際のオブジェクトをオブジェクトキーのリストにマップする効率的な方法はありますか？膨大な数の商品レコードでは、私のアプローチは非常に遅くなります。たぶん、私は単純な解決策を見るにはあまりにも盲目でしょうか？

ありがとうございました！

Answer 1

私はそこでいくつかのデータを非正規化/複製する必要があると思います。私も同様の状況があり、このFirebaseビデオは私のために多くのことをクリアしました：https://youtu.be/ran_Ylug7AE?t=2m22s（リンクは2:22の節に更新されています）

私のショットはあなたが完全な説明にリンクすることができるように、最も重要なデータだけで、 "アイテム"で行ったように、 "listitems"のキーを "listitems"に置き換えます。