Typescript 按多个复选框列出的Vue筛选器列表

我有一个这样的数据列表

[
   {
      "name":"UMBERTO",
      "description":"Some description",
      "application_area":{
         "LegalCompliance":false,
         "Certification":true,
         "Accounting":true,
         "LifeCycle":true,
         "Reporting":true,
         "DecisionSupport":true,
         "CompanyAssociations":true
      },
      "object_of_observation":{
         "Waste":false,
         "Facilities":false,
         "DangerousSubstances":false,
         "Emission":false,
         "Energy":true,
         "MaterialFlow":true,
      }
   },
   ...
]

我想通过以下几个复选框筛选此列表：

data() {
    return {
        isFilterActiveMap: {
            "Abfall": false,
            "Gefahrstoffe": false,
            "Energie": false,
        }
    }
}

---

过滤器应该通过逻辑连接，现在每个复选框都有一个布尔v型值。是否有更有效的数据结构？如何将过滤器应用于数据列表？我正在使用vuetify数据表

您可以使用对象作为字典来存储所有过滤器的

isActive

状态

您的

data（）

将如下所示：

data() {
    return {
        isFilterActiveMap: {
            "Abfall": false,
            "Gefahrstoffe": false,
            "Energie": false,
        }
    }
}

然后，如果需要将活动过滤器作为数组获取，则可以生成计算值：

computed: {
    activeFilters() {
        return Object.entries(this.isFilterActiveMap)
                     .filter(([filterType, isActive]) => isActive === true)
                     .map(([filterType]) => filterType);
    }
}

但是，需要记住的一点是，您需要使用

this.$set

更新对象，如下所示：

methods: {
    updateFilter(filterType, isActive) {
        this.$set(this.isFilterActiveMap, filterType, isActive);
    }
}

使用这种方法，您最初也不需要将所有过滤器添加到

data（）

。您可以有这样一个

loadFilters

方法：

methods: {
    loadFilters(filters) {
        const isFilterActiveMap = {};
        for (const filter of filters) {
            isFilterActiveMap[filter] = false;
        }
        this.isFilterActiveMap = isFilterActiveMap;
    }
}

然后，您可以将过滤器作为一个数组，即使在组件声明之外，如果它不必是被动的：

const filters = ["filter1", "filter2", "filter3"];

export default {
    created() {
        this.loadFilters(filters);
    }
}

或者从API获取它们：

export default {
    created() {
        this.fetchFilters().then((filters) => {
            this.loadFilters(filters);
        });
    }
}

---

那么我如何在数据列表上应用过滤器呢？使用计算的activeFilters，或者添加一些代码，以便我可以看到您现在是如何操作的。谢谢，这让我找到了一个解决方案。true复选框值将添加到数组中。然后，我从具有布尔属性的对象创建数组，并检查是否每个过滤器数组都包含所创建的数组