Issue experienced with Vue2 where utilizing a computed property to filter a nested v-for structure

Question

Issue experienced with Vue2 where utilizing a computed property to filter a nested v-for structure

I have a unique HTML challenge that requires me to iterate through an unconventional data setup. The information is retrieved in two separate parts from Firebase: one for categories and another for businesses. The structure of the data is as follows:

Businesses
    -UniqueFirebaseID
        cat: "food"

Categories
    -IniqueFirebaseID
        name: "food"

My goal is to loop through the data using the following approach (apologies for the lack of semantic markup):

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

I am currently attempting to create a computed property for filtering purposes. Although I have outlined my intentions below, I am unsure about the implementation. Any recommendations?

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

javascript vue.js vuejs2

Answer 1

Answer №1

It is advised to utilize a method instead of the current approach.

<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 have the option to use a computed property to construct the desired data structure for iteration.

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

Your updated template would be as follows:

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

Here is an example link for reference.

Answer 2

It is advised to utilize a method instead of the current approach.

<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 have the option to use a computed property to construct the desired data structure for iteration.

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

Your updated template would be as follows:

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

Here is an example link for reference.

Issue experienced with Vue2 where utilizing a computed property to filter a nested v-for structure

Answer №1

Similar questions

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

Navigating horizontally within a list using Sencha Touch2

Creating dynamic routes with Map in ReactJS: a beginner's guide

The Vue Enter/Leave Transition feature may not function as intended when used in conjunction with opacity settings

When integrating react-hook-form with Material-UI TextField in a form, an error occurs stating that "TypeError: e.target is undefined" when

Is it possible for us to perform an addition operation on two or more items that belong to the same

Best Practices for Closing MySQL Connections in Node.js

Generate slanted projection mapboxgl

ng-animate causing an impact on the input element, even though it is not supposed to

Merge JSON object information into tables, including column headings

What is the process for extracting HTML content using the JavaScript executor?

Issue with Parcel 2 - Error encountered: Module 'axios' not found

Getting started with TypeScript in combination with Node.js, Express, and MongoDB

What is the significance of providing a sole argument to the Object () function?

Dynamically updating fields in PHP using jQuery's passed variable

Unable to pass multiple objects as props in Vue component causing issues

What is the best way to concatenate a data object?

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

Storing a Promise in a Variable in React

Combining audio and video streams in Node.js