Question

我有一个json数据和一些复选框，这些复选框应根据选中的项目过滤掉数据。我在Google上搜索了很多，但无法解决这个问题。在data()中，我有checkedFilters: []绑定到一些<input id="someId" value="someValue" v-model="checkedFilters" type="checkbox" />

现在，我正在使用v-for并遍历showFilteredResults

showFilteredResults: function() {
   // Missing: Filter using checkedFilters!
   return this.getCurrentAds; // just returns all ads if no checkbox is selected
}

我开始嵌套if，但这无济于事。我想一定有一种寻找匹配项并相应地过滤对象的方法，这就是每个网上商店的工作方式。我可以在这里获得一些帮助和指导吗？总的来说，我对Vue和js的世界来说还很陌生。

这是我半工半读的代码

this.getCurrentAds.map(ad => {
        Object.values(ad).filter(field => {
          this.checkedFilters.map(filter => {
            if (field === filter) {
              console.log("Match", field);
            }
          });
        });
      });

Answer 1

根据评论部分的说明，我将按照以下方式进行操作。我假设您有一个包含数据对象的数组。如果filters数组中没有过滤器，则此数组将完整显示。如果其中有任何过滤器，它将仅显示过滤的项目。有一个计算属性，它总是返回相关的项目集。

我添加了两个计算出的属性，它们返回可能的属性值。因此，如果对象中存在animalType属性，那么将从数据中检索此animalType的每个可能值。这是针对所有数据项的每个属性完成的。布尔值会被滤除。

使用布尔值时，值不是重要的，而是键。因此，与其他所有属性一样，每个键（而不是它们的值）都返回布尔值。

然后使用这两个数组过滤有效数据。过滤仍按值进行（与===进行比较）。因此，如果将对象作为属性值，则将无法正常工作（除非它具有相同的对象引用。）

这里也是CodePen可以尝试的。

<template>
  <ul>
    <li v-for="item in filteredData">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      data: [{
        name: 'Kitty',
        animalType: 'cat',
        test: 123,
        booleantest: true
      }, {
        name: 'Bello',
        animalType: 'dog'
      }, {
        name: 'Bobby',
        animalType: 'gorilla',
        booleantest: false
      }],
      filters: ['dog', 'booleantest']
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => {
        if (this.filters.length === 0) {
          return true;
        }

        let showItem = false;
        this.allObjectPropertiesWithoutBooleans.forEach(property => {
          if (item[property] !== undefined && this.filters.includes(item[property])) {
            showItem = true;
            console.debug(`The item ${JSON.stringify(item)} contains the property "${property}" with the value "${item[property]}" which is also in the filters array.`);
          }
        });
        this.allBooleanObjectProperties.forEach(property => {
          if (item[property] === true && this.filters.includes(property)) {
            showItem = true;
            console.debug(`The item ${JSON.stringify(item)} contains the boolean property "${property}" which is "true" and is also in the filters array.`)
          }
        });
        return showItem;
      });
    },
    allObjectPropertiesWithoutBooleans () {
      const objectProperties = {};
      this.data.forEach(item => {
        Object.keys(item).filter(property => item[property] !== true && item[property] !== false).forEach(property => {
          objectProperties[property] = true;
        });
      });
      return Object.keys(objectProperties);
    },
    allBooleanObjectProperties () {
      const objectProperties = {};
      this.data.forEach(item => {
        Object.keys(item).filter(property => item[property] === true || item[property] === false).forEach(property => {
          objectProperties[property] = true;
        });
      });
      return Object.keys(objectProperties);
    }
  }
};
</script>

筛选具有提供值的对象

1 个答案: