mercredi 9 décembre 2020

Applying a conditional statement to a Vuetify v-for loop not working correctly

I am using Vuetify to create two v-radio-groups where the items are comprised of filtered arrays of this.listOfCompanies. More specifically, an array of items from below where axis_type = 'series' and an array of items from below where axis_type = 'category'.

So in summary, the v-for for one radio group should be comprised of items 'Company A' and 'Company B' since they have axis_type series and the other radio group of 'Company C'.

this.listOfCompanies = [
  {
    "id": 352,
    "grid_id": 28,
    "header": "Company C",
    "axis_type": "category",
  },
  {
    "id": 353,
    "grid_id": 28,
    "header": "Company B",
    "axis_type": "series",
  },
  {
    "id": 354,
    "grid_id": 29,
    "header": "Company A",
    "axis_type": "series",
  }
]

For the radio groups I have the following:

<v-radio-group v-if="this.listOfCompanies.map(a=>a.axis_type == 'category')">
    <v-radio
        v-for="category in listOfCompanies"
        :key="category"
        :label="category"
    ></v-radio>
</v-radio-group>

<v-radio-group v-if="this.listOfCompanies.map(a=>a.axis_type == 'series')">
    <v-radio
        v-for="series in listOfCompanies"
        :key="series"
        :label="series"
    ></v-radio>
</v-radio-group>

However it doesn't filter this.listOfCompanies correctly. What might I be doing wrong in my solution?

Aucun commentaire:

Enregistrer un commentaire