Vue2の問題は、計算されたプロパティを使用してネストされたv-forをフィルタリングします。

Question

ループする必要のある奇妙なHTML設定があります。私はFirebaseから2つの部分で自分のデータを取得します。私はそのようにように私のデータをループにしたい

Businesses 
    -UniqueFirebaseID 
     cat: "food" 

Categories 
    -IniqueFirebaseID 
     name: "food" 

は（非セマンティックマークアップをご容赦）：

<ul> 
    <li v-for="cat in categories"> 
     <ul> 
      <li v-for="business in filteredByCat">{{business.name}}</li> 
     </ul> 
    </li> 
</ul> 

私がしようとしていますので、同じように構造化されたデータのcategoriesとbusinessesセットがあります計算されたプロパティをまとめてフィルタリングします。下の1つは、私がやろうとしていることを表していますが、それを行う方法がわかりません。助言がありますか？

computed: { 
    filteredByCat() { 
     return this.businesses.filter((element) => { 
     return element.cat.match(cat.name) 
     }) 
    } 
    } 

Answer 1

代わりにメソッドを使用してください。

<ul> 
    <li v-for="cat in categories"> 
     <ul> 
      <li v-for="business in filteredByCat(cat)">{{business.name}}</li> 
     </ul> 
    </li> 
</ul> 

methods: { 
    filteredByCat (cat) { 
     return this.businesses.filter((element) => { 
     return element.cat.match(cat.name) 
     }) 
    } 
    } 

また、計算を使用して反復処理するデータ構造を構築することもできます。

computed:{ 
    businessesByCategory(){ 
    return this.categories.reduce((acc, category) => { 
     acc[category] = this.businesses.filter(b => b.category == category) 
     return acc 
    }, {}) 
    } 
} 

そして、あなたの新しいテンプレートが

<ul> 
    <li v-for="(value, key) in businessesByCategory"> {{key}} 
    <ul> 
     <li v-for="business in value">{{business.name}}</li> 
    </ul> 
    </li> 
</ul> 

Exampleだろう。