Vue.js filterBy数组作为searchText [英] Vue.js filterBy array as searchText

问题描述

在vue.js中如何过滤多个属性？

请考虑以下数据结构。

<$ p $新的Vue（{
el：body，
data：{
items：[
{name：'thing1'，age：5，properties ：[
{name：'color'，value：'black'}，
{name：'weight'，value：3}
]}，
{name：' ，'b2'，年龄：3，属性：[
{name：'length'，value：4}，
{name：'weight'，value：4}
]}，
{name：'thing3'，age：9，properties：[
{name：'color'，value：'black'}，
{name：'length'，value：20}
]}
]，
财产：''
}
}）;

现在，可以轻松过滤单个属性，如下所示：

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

但是，如果我想要搜索多个属性。

例如得到 thing3 ，我已经试过了，但是，当然这是行不通的。

 属性：['black'，20] 
  

那种动态filterBy链接？我不知道会有多少属性。

完成此操作的粗略方法是为当前项目数组中的每个不同属性创建filterBy，并使其大部分为空。

  new Vue（{
 el：body，
 data：{
物品：[]，
 property1：''，
 property2：''，
 property3：''，
 ... 
 propertyN：''
} 
}）; 
  

这个：

项目中的项目| filterBy property1 in'properties'| 
 filterBy property2 in'properties'| 
 filterBy property3 in'properties'| $ b $ {code>< div v-for = b ... 
 filterBy propertyN in'properties'> 
 {{item.name}} 
< / div> 
  

但是感觉不对。

 过滤器：{
 myProperty：function（items，properties = this.properties）{
 if（！properties || properties.length === 0）{
 return items; 
} 
 return this.recursiveFilter（items，propeties，0）; 
 
 
 $ {b 
 $ recursiveFilter：function（items，properties，currentPosition）{
 if（currentPosition + 1> properties.length）
退货项目; 
 var new_items; 
 new_items = items.filter（function（item）{
 for（item.properties））{
 if（row.value == properties [currentPosition]）
 return true ; 
} 
}）; 
返回this.recursiveFilter（new_items，properties，currentPosition + 1）; 
} 
} 
  

In vue.js how can one filterBy multiple properties?

Consider following data structure.

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

Now, one can easily filterBy single property, like so:

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

However, if I would like to search by more than one property.
e.g. to get thing3, I have tried this, but, of course, this does not work.

property: ['black', 20]

Do I need to implement some sort of dynamic filterBy chaining? I do not know how many properties there will be.

Crude way to accomplish this would be to create filterBy for each distinct property in current items array and keeping most of them empty. Something like this.

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

And this:

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

But that feels wrong to do.

解决方案

Seems like custom function is the only viable option.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！