Vue2問題使用計算屬性過濾嵌套v-爲

Question

我有一個奇怪的HTML設置，我需要循環。我從Firebase獲取兩部分數據。有一個categories和businesses組數據結構，像這樣：

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> 

我想將計算的屬性放在一起進行過濾。下面的代表我正在嘗試做什麼，但不知道如何去做。有什麼建議麼？

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。