Javascript 使用computed属性筛选嵌套v-for的Vue2问题

我有一个奇怪的HTML设置，我需要循环。我从Firebase获得的数据分为两部分。有一组

类别

和一组

业务

数据结构如下：

Businesses
    -UniqueFirebaseID
        cat: "food"

Categories
    -IniqueFirebaseID
        name: "food"

然后我想这样循环遍历我的数据（请原谅非语义标记）：

改用一种方法

<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)
      })
    }
  }

你的新模板是

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

{{key}

{{business.name}

---

.

我知道我来晚了一点，但我只是想添加官方

Vue

指南中的内容，以供参考。该指南说明了这一限制及其解决方法。

<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>