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

Question

我正在创建一个无线电组选择器来过滤返回的数据，但我陷入了最后一个区域。

它会拉入所有正确的“焦点区域”，但它会针对数据库中的每个项目执行此操作。我想做的是让它只在每个“焦点区域”显示一次，而不是每个条目显示一次。您可以在下图中看到它在做什么。

我相信问题出在下面的代码中，但我不确定它是什么。我添加了脚本以获得更多上下文。

任何帮助将不胜感激：

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

脚本

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();
    },
  },
};

Answer 1

您可以使用 Set 删除重复项：

const tools = [{attributes: {contentAreaOfFocus: 'c'}}, {attributes: {contentAreaOfFocus: 'b'}}, {attributes: {contentAreaOfFocus: 'c'}}, {attributes: {contentAreaOfFocus: 'a'}}, {attributes: {contentAreaOfFocus: 'a'}}]
const areaOfFocuses = [... new Set(tools.map(a => a.attributes.contentAreaOfFocus).sort())]
console.log(areaOfFocuses)