使用computed属性过滤嵌套v-for

时间:2017-05-25 21:19:57

标签: javascript vue.js vuejs2

我有一个奇怪的HTML设置,我需要循环。我从Firebase获取了两部分的数据。有一组categoriesbusinesses数据结构如下:

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

1 个答案:

答案 0 :(得分:3)

请改用方法。

<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来构建要迭代的数据结构。

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