Vue.js filterBy array as searchText - filter

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.

Answer 1

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