title: Vue js Search Filter - Data & Binding Load Issues
body: <p>I have a form which currently pulls in a set of data from an external JSON as a list of options, I am trying to incorporate a search filter to display the options as you type. Here is the computed code I have created:</p>
  
  <pre><code>computed: {
              searchedSlots: function() {
                return this.items.filter(function(item) {
                  return (
                    (item.shortcode.toLowerCase().match(this.searchTerms.toLowerCase())) ||
                    (item.slots.toLowerCase().match(this.searchTerms.toLowerCase()))
                  )
                }.bind(this));
              }
            }
  </code></pre>
  
  <p>Also the search v-model input isn't displaying in the <em>Summary</em></p>
  
  <p>Here is the form at <a href="https://jsfiddle.net/38h0jpwf/12/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Here is an example of what the form may look like after it has been filled in
  <a href="https://i.stack.imgur.com/zDqC2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDqC2.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
      /&gt;
  
      &lt;style&gt;
      input, select, button {
          float:left;
          display:block;
          clear:both;
          min-width:200px;
          margin-bottom: 1rem;
        }
  
        .maxfee, .summary, p.summaryresult {
          float:left;
          display:block;
          clear:both
        }
      &lt;/style&gt;
  
      &lt;!-- Vue.js CDN --&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;form name="myform" id="deliveryservice"&gt;
  
          &lt;!--&lt;pre&gt;{{ items.shortcode }}&lt;/pre&gt;--&gt;
  
          &lt;!-- Load in dayslots from external JSON file --&gt;
          &lt;input name="dayslot" v-for="item in searchedSlots" v-model.lazy="dayslotv" type="text" placeholder="Enter Day and Delivery Slot" required&gt;
  
          &lt;select v-model="search"&gt;
              &lt;option v-for="item in items" v-bind:value="item.slot"&gt;
                {{ item.shortcode }} {{ item.slot }}
              &lt;/option&gt;
            &lt;/select&gt;
  
          &lt;select v-model="servicev" required&gt;
            &lt;option selected disabled hidden&gt;Please Select&lt;/option&gt;
            &lt;option value="standard"&gt;Standard&lt;/option&gt;
            &lt;option value="installation"&gt;Installation&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;!-- Customer adds the max amount they wish to pay --&gt;
          &lt;div class="maxfee"&gt;
              &lt;input name="price" v-model.number="pricev" type="currency" placeholder="Max price you will pay" required&gt;
          &lt;/div&gt;
  
          &lt;!-- We then display a summary of the options they chose, before they submit --&gt;
          &lt;div class="summary"&gt;&lt;p&gt;Summary:&lt;/p&gt;&lt;/div&gt;
          &lt;p class="summaryresult" style="font-weight:bold;"&gt;I would like {{ search.shortcode }} on {{ servicev }} service and pay no more than £{{ pricev }}&lt;/p&gt;
  
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;script&gt;
          const app = new Vue({
            el: '#deliveryservice',
            data: {   
              items: [],
              search: '',
              dayslotv: '',
              servicev: '',
              pricev: ''
  
            },
            created: function() {
              fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
                .then(resp =&gt; resp.json())
                .then(items =&gt; {        
                  this.items = items
                })
            },
          });
          &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>