Блог

Я использую Vuetify для создания двух v-radio-групп, где элементы состоят из отфильтрованных массивов this.listOfCompanies. Более конкретно, массив элементов снизу, где axis_type = ‘серия’, и массив элементов снизу, где axis_type = ‘категория’.

Таким образом, v-for для одной группы радиостанций должен состоять из элементов «Company A» и «Company B», поскольку они имеют серию axis_type, а другая группа радиостанций «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",
  }
]
 

Для радиогрупп у меня есть следующее:

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

Однако он неправильно фильтрует this.listOfCompanies. Что я могу делать неправильно в своем решении?

Вы должны использовать вычисляемое свойство. вот код codepen

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

шаблон

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