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

Question

我正在使用Vuetify创建两个v-radio-group，其中项目由this.listOfCompanies的筛选数组组成。更具体地说，下面的项目数组，其中axis_type='series'，下面的项数组，其中ax _type='category'。

因此，总的来说，一个无线电组的v-for应该由项目"A公司"one_answers"B公司"组成，因为它们有axis_type系列，而另一个无线电分组是"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>

但是，它没有正确筛选此.listOfCompanies。我的解决方案中可能做错了什么？

Answer 1

您应该使用computed属性。这是代码笔代码

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>