将条件语句应用于 Vuetify v-for 循环无法正常工作

Question

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?

Answer 1

You should use computed property. here is the codepen code

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    const 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",
  }
];
    return {
      selSeries: 353,
      selCatgory:352,
      listOfCompanies
    }
  },
  computed:{
    compSeries(){
      return this.listOfCompanies.filter(item=>item.axis_type==='series')
    },
    compCategory(){
      return this.listOfCompanies.filter(item=>item.axis_type==='category')
    }
  }
})

template

<div id="app">
  <v-app id="inspire">
    <v-container
      class="px-0"
      fluid
    >
      <v-radio-group v-model="selSeries">
        <v-radio
          v-for="item in compSeries"
          :key="item.id"
          :label="item.header"
          :value="item.id"
        ></v-radio>
      </v-radio-group>
       <v-radio-group v-model="selCatgory">
        <v-radio
          v-for="item in compCategory"
          :key="item.id"
          :label="item.header"
          :value="item.id"
        ></v-radio>
      </v-radio-group>
    </v-container>
  </v-app>
</div>