Vue.js filterBy array as searchText

Question

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.

Use a custom filter function or a computed property. Then you can iterate through the properties, maybe using Array.filter(), and add your own custom logic — Jeff
– Jeff, Commented May 25, 2016 at 16:15
Check out this example in the vuejs docs: <div v-for="user in users | filterBy searchText in fields"> () — Nora
– Nora, Commented May 29, 2016 at 21:30
No @Nora that would work if I wanted to search for one string in many fields. However I have an array of strings. — liepumartins
– liepumartins, Commented May 30, 2016 at 6:52
Ay, I am trying to do the same thing... I have an array of strings that I want to filter a separate array of users. I'm hoping we both find a resolution! — Daniel Fowler
– Daniel Fowler, Commented Oct 14, 2016 at 17:42

liepumartins · Accepted Answer · 2016-05-30 06:51:43Z

0

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

answered May 30, 2016 at 6:51

liepumartins

4942 gold badges7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Fowler Over a year ago

I wonder how resource intensive this is? I have the same issue, and in my case I have about a dozen strings in my filter array, filtering some 100+ items. I want to minimize the performance hit, but I guess that's what we're all striving to do, isn't it?

Collectives™ on Stack Overflow

Vue.js filterBy array as searchText

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related