Vue.js 如何只提取一次用于无线电组过滤的数据，而不是针对数据库中的每个条目提取数据

我正在创建一个用于过滤返回数据的单选项组 Select 器，但我被困在最后一个区域.

它吸引了所有适当的"焦点区域"，但是它对数据库中的每一项都这样做.我想做的是让它在每个"焦点区域"只显示一次，而不是每个条目.你可以在下面的图片中看到它在做什么.

我相信这个问题存在于下面的代码中，但我不确定它是什么.我添加了脚本以了解更多上下文.

如有任何帮助，将不胜感激:

     <v-radio-group class="ml-2" v-model="filters.areaOfFocus" column>
        <v-radio
          v-for="areaOfFocus in areaOfFocuses"
          :key="areaOfFocus"
          :label="areaOfFocus"
          :value="areaOfFocus"
          color="#C5D5EA"
        ></v-radio>
      </v-radio-group>

Script个

export default {
  name: "CapacityBuilding",
  props: ["tools"],
  data() {
    return {
      menu1: false,
      menu2: false,
      menu3: false,
      FullProfileDialog: false,
      error: null,
      filters: {
        keyword: null,
        areaOfFocus: null,
        resourceType: null,
        resourceFormat: null,
      },
      viewingEntity: null,
      areaofFocuses: [],
      resourceTypes: [],
      resourceFormats: [],
      filteredTools: [],
      websiteLink: [],
      videoLink: [],
      file: [],
      toolHeaders: [
        { text: "Name", value: "attributes.name", width: "30%" },
        {
          text: "Category",
          value: "attributes.contentResourceTopic",
          width: "20%",
        },
        {
          text: "Format",
          value: "attributes.contentResourceFormat",
          width: "15%",
        },
        { text: "Type", value: "attributes.contentResourceType", width: "20%" },
        {
          text: "Actions",
          value: "actions",
          align: "center",
          sortable: false,
          width: "20%",
          class: "actions-text",
        },
      ],
    };
  },
  created() {
    this.areaOfFocuses = this.tools
      .map((t) => t.attributes.contentAreaOfFocus)
      .sort();
    this.resourceTypes = this.tools
      .map((t) => t.attributes.contentResourceType)
      .sort();
    this.resourceFormats = this.tools
      .map((t) => t.attributes.contentResourceFormat)
      .sort();
    this.filteredTools = this.tools;
  },
  methods: {
    async applyFilters() {
      var tempFilteredTools = JSON.parse(JSON.stringify(this.tools));

      if (this.filters.keyword) {
        var searchBy = this.filters.keyword.toLowerCase();

        tempFilteredTools = tempFilteredTools.filter(
          (q) =>
            q.attributes.name.toLowerCase().indexOf(searchBy) !== -1 ||
            (q.attributes.contentResourceFormat &&
              q.attributes.contentResourceFormat
                .toLowerCase()
                .indexOf(searchBy) !== -1) ||
            (q.attributes.contentResourceTopic &&
              q.attributes.contentResourceTopic
                .toLowerCase()
                .indexOf(searchBy) !== -1) ||
            (q.attributes.contentResourceType &&
              q.attributes.contentResourceType
                .toLowerCase()
                .indexOf(searchBy) !== -1)
        );
      }

      if (this.filters.areaOfFocus) {
        tempFilteredTools = tempFilteredTools.filter(
          (q) => q.attributes.contentAreaOfFocus === this.filters.areaOfFocus
        );
      }

      if (this.filters.resourceType) {
        tempFilteredTools = tempFilteredTools.filter(
          (q) => q.attributes.contentResourceType === this.filters.resourceType
        );
      }

      if (this.filters.resourceFormat) {
        tempFilteredTools = tempFilteredTools.filter(
          (q) =>
            q.attributes.contentResourceFormat === this.filters.resourceFormat
        );
      }

      this.filteredTools = tempFilteredTools;
    },
    async resetSearch() {
      this.filters = {
        areaOfFocus: null,
        resourceFormat: null,
        resourceType: null,
        keyword: null,
      };
      await this.applyFilters();
    },
  },
};