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

Why does Vue 3 template display 101 instead of 1 when incrementing the number from 0?

Utilizing jQuery for displaying or hiding list elements

Tips for Choosing the Right Objects in Vue.js

Encountering an issue while invoking the helper function in Vuejs

Buttons in Datatables fail to appear when using ajax loading

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Run JavaScript on every website when the page loads

What is the best way to transfer data in a JavaScript onclick event and then retrieve it in the click handler function?

Using jQuery to insert PHP code into a <div> element

Ensure that the context is used to effectively clear any existing data from the previous bar chart

Tips for automatically refreshing a Next.js application following an update in an external library

Here is a unique version: "In Javascript, users can trigger the function this.Something() from within this.img.onload by

Implementing Vuetify data-table slots for different screen sizes: mobile breakpoints and body

Having trouble setting the focus on a text box following a custom popup

How to implement setState within a Promise function using useEffect in React functional components with hooks?

Trouble fetching asynchronous data in Next.js Higher Order Component

The functionality of Intersection Observer causes text to appear over the header

Block-level declarations are commonly used in TypeScript and Asp.net MVC 5

Apps hosted on Heroku are restricted from accessing CORS, even within the platform's domain

end the node.js automated testing process