title: How do i bind select box with input in vuejs?
body: <p>I try to bind select box with input so I have a select box with pre defined options and when selected that option will be in the input and when the user types text in the input a dynamic <code>new</code> select option should be made if it is not in the pre defined list else it should match on one of the items.</p>
  
  <pre><code>&lt;div class="col-md-2 text-center"&gt;          
     &lt;select class="form-control" v-model="selected"&gt;
      &lt;option v-for="item in inventory" :value="item" :key="item.id"&gt;
        @{{ item.name }}
      &lt;/option&gt;
    &lt;/select&gt;
    &lt;p&gt;
      @{{ selected.id}}
    &lt;/p&gt;            
  &lt;/div&gt;
  
  &lt;input v-model="inputBind" placeholder="," type="text" class="form-control"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code> new Vue({
      el:'#app',
       data:{
         inputBind:'',
         inventory: [
            {name: 'MacBook Air', id: 1},
            {name: 'MacBook Pro', id: 2},
            {name: 'Lenovo W530', id: 3},
            {name: 'Acer Aspire One', id: 4}
          ],
          selected: 2
        },
       created: function() {
            this.selected = this.inventory.find(i =&gt; i.id === this.selected);
        },
  </code></pre>