Vue 通过多个复选框过滤列表

Question

我有这样一个数据列表

[
   {
      "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,
      }
   },
   ...
]

我想通过几个复选框过滤此列表，如下所示：

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

Answer 1

您可以将对象用作字典来存储所有过滤器的 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);
    }
}

但是，caveat 需要记住的是，您需要使用 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);
        });
    }
}

Vue 通过多个复选框过滤列表

Vue filter list by multiple checkboxes

typescript

vue.js

vuetify.js