Question

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

但是，如果我想通过多个房产进行搜索例如得到thing3，我试过了，但是，当然，这不起作用。

property: ['black', 20]

我是否需要实现某种动态filterBy链接？我不知道会有多少属性。

实现此目的的主要方法是为当前项数组中的每个不同属性创建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>

但是做错了。

Answer 1

似乎自定义功能是唯一可行的选择。

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

Vue.js filterBy数组为searchText

1 个答案: