title: Use v-model to search in v-for array - Vue.js
body: <p>It's been a long time since I build something with Vue.js. I am building just a simple app that's rendering some items with a <code>v-for</code> from an array. I want to use a input box with a <code>v-model</code> to search in the list of items (presets).</p>
  
  <p>Code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row top20"&gt;
      &lt;div class="col-md-3" v-for="preset in presets"&gt;
          &lt;div class="template-block" :id="preset.id"&gt;
              &lt;img src="http://placehold.it/120x120" v-bind:alt="preset.img" class="img img-responsive img-template"&gt;
              &lt;h3&gt;{{ preset.presetName }}&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Data</p>
  
  <pre><code>searchQuery: '',
  presets: [
      {id: '2', presetName: 'WooCommerce', img: 'woocommerce.png'},
      {id: '3', presetName: 'Magento', img: 'magento.png'},
      {id: '1', presetName: 'Custom', img: 'custom.png'}
  ]
  </code></pre>
  
  <p>So I tried something like <code>&lt;div class="col-md-3" v-for="preset in presets | searchQuery"&gt;</code> and other things like that but that don't seem to work. I thought of using a computed property but since I don't exactly know how they work I haven't figured it out. Is there someone with a fast and easy solution?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I've figured out that I can use a method to search. But the problem with that is that it will only display the results of a exactly match. What I would like is that If I type something and the letters are included in the name it will still display the items that (for a part) match.</p>
  
  <p>Method </p>
  
  <pre><code>methods: {
      filterItems: function(presets) {
          var app = this;
          return presets.filter(function(preset) {
              return preset.presetName == app.searchQuery;
          })
      }
  }
  </code></pre>
  
  <p>Edited view</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-md-3" v-for="preset in filterItems(presets)" :key="preset.presetName"&gt;
  </code></pre>