Vue.js filterBy array as searchText
<p>In vue.js how can one filterBy multiple properties?</p>

<p>Consider following data structure.</p>

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

<p>Now, one can easily filterBy single property, like so:</p>

<pre><code>&lt;input v-model="property" /&gt;
&lt;div v-for="item in items | filterBy property in 'properties'"&gt;
    {{ item.name }}
&lt;/div&gt;
</code></pre>

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

<pre><code>property: ['black', 20]
</code></pre>

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

<p>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.</p>

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

<p>And this:</p>

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

<p>But that feels wrong to do.</p>