0

我正在使用 Vuetify 创建两个 v-radio-groups，其中项目由 this.listOfCompanies 的过滤数组组成。更具体地说，来自下面的项目数组，其中axis_type = 'series'，以及来自下面的项目数组，其中axis_type = 'category'。

因此，总而言之，一个无线电组的 v-for 应该由项目“公司 A”和“公司 B”组成，因为它们具有轴类型系列和“公司 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。我的解决方案可能做错了什么？

4

1 回答 1

0

您应该使用计算属性。这是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>
于 2020-12-10T07:07:42.050 回答