Vue2 issue using computed property to filter nested v-for

Question

I have an odd HTML setup that I need to loop through. I get my data in two parts from Firebase. There is a categories and a businesses set of data structured like so:

Businesses
    -UniqueFirebaseID
        cat: "food"

Categories
    -IniqueFirebaseID
        name: "food"

I then want to loop through my data like so (pardon the non-semantic markup):

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

I am trying to put together a computed property to filter. The one below represents what I'm trying to do but not sure how to do it. Any suggestions?

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

I know I'm a little late to the party but I just wanted to add -for reference purposes- the link from the official Vue guide that states this limitation and also the way around it. — kingJulian
– kingJulian, Commented Jun 6, 2018 at 14:50

Bert · Accepted Answer · 2017-05-25 21:35:26Z

3

Use a method instead.

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

Alternatively you could use a computed to build the data structure you want to iterate.

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

And your new template would be

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

Example.

edited May 25, 2017 at 21:35

answered May 25, 2017 at 21:21

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue2 issue using computed property to filter nested v-for

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related