Vue.js filterBy数组作为搜索文本

在vue.js中，一个过滤器如何能够通过多个属性进行过滤

考虑以下数据结构

new Vue({
 el: body,
 data: {
    items: [
      {name: 'thing1', age: 5, properties: [
         { name: 'color', value: 'black'},
         { name: 'weight', value: 3}
       ]},
      {name: 'thing2', age: 3, properties: [
         { name: 'length', value: 4},
         { name: 'weight', value: 4}
       ]},
      {name: 'thing3', age: 9, properties: [
         { name: 'color', value: 'black'},
         { name: 'length', value: 20}
       ]}
     ],
     property: ''
 }
});

现在，可以很容易地通过单个属性进行过滤，如下所示：

<input v-model="property" />
<div v-for="item in items | filterBy property in 'properties'">
    {{ item.name }}
</div>

我是否需要通过链接实现某种动态过滤器？我不知道会有多少房产

实现这一点的粗略方法是为当前项数组中的每个不同属性创建filterBy，并将其中大部分保持为空。像这样的

new Vue({
    el: body,
    data: {
        items: [],
        property1: '',
        property2: '',
        property3: '',
        ...
        propertyN: ''
    }
 });

这是：

<div v-for="item in items | filterBy property1 in 'properties'|
    filterBy property2 in 'properties'|
    filterBy property3 in 'properties'|
    ...
    filterBy propertyN in 'properties'">
    {{ item.name }}
</div>

{{item.name}

---

但这样做感觉是不对的。

似乎自定义函数是唯一可行的选择

filters: {
   myProperty: function(items, properties = this.properties) {
       if (!properties || properties.length === 0) {
           return items;
       }
       return this.recursiveFilter(items, propeties, 0);
   }
},
methods: {
    recursiveFilter: function(items, properties, currentPosition) {
        if (currentPosition+1 > properties.length)
            return items;
        var new_items;
        new_items = items.filter(function(item) {
            for (row of item.properties) {
                if (row.value == properties[currentPosition])
                    return true;
            }
        });
        return this.recursiveFilter(new_items, properties, currentPosition+1);
    }
}

---

使用自定义筛选函数或计算属性。然后，您可以使用

Array.filter（）

，迭代属性，并添加您自己的自定义逻辑在vuejs中查看此示例：

（

）如果我想在多个字段中搜索一个字符串，则不使用@Nora。但是我有一个字符串数组。嗯，我正在尝试做同样的事情。。。我有一个字符串数组，我想过滤一个单独的用户数组。我希望我们都能找到解决办法！我想知道这对资源有多密集？我也有同样的问题，在我的例子中，我的过滤器数组中有十几个字符串，过滤了大约100多个项目。我想尽量减少对性能的影响，但我想这是我们都在努力做到的，不是吗？

filters: {
   myProperty: function(items, properties = this.properties) {
       if (!properties || properties.length === 0) {
           return items;
       }
       return this.recursiveFilter(items, propeties, 0);
   }
},
methods: {
    recursiveFilter: function(items, properties, currentPosition) {
        if (currentPosition+1 > properties.length)
            return items;
        var new_items;
        new_items = items.filter(function(item) {
            for (row of item.properties) {
                if (row.value == properties[currentPosition])
                    return true;
            }
        });
        return this.recursiveFilter(new_items, properties, currentPosition+1);
    }
}