どのように私はvuejsの入力と選択ボックスをバインドするのですか？

Question

入力ボックスにバインドしようとしていますので、あらかじめ定義されたオプションを持つ選択ボックスがあり、選択するとそのオプションが入力になり、ユーザーがテキストを入力に入力するとダイナミックになりますnewあらかじめ定義されたリストにない場合は、アイテムの1つに一致する必要があります。

<div class="col-md-2 text-center">   
    <select class="form-control" v-model="selected"> 
    <option v-for="item in inventory" :value="item" :key="item.id"> 
     @{{ item.name }} 
    </option> 
    </select> 
    <p> 
    @{{ selected.id}} 
    </p>    
</div> 

<input v-model="inputBind" placeholder="," type="text" class="form-control"> 

と

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 => i.id === this.selected); 
     }, 

Answer 1

データ入力の両方によって共有されるjs fiddleそのように確認し、入力のための同じデータATTRを使用。それが最も簡単な方法です。選択ボックスで正しいオプションを選択するには、一致する値を入力する必要があります。このように必要な理由は何かわからないが、ユーザーフレンドリーではない。

のJs

new Vue({ 
el: '#app', 
data: { 
    selected: 'item1', 
    input: '', 
    items: { 
     1: {id: 1, val: 'item1'}, 
     2: {id: 2, val: 'item2'}, 
     3: {id: 3, val: 'item3'}, 
    } 
    } 
}); 

Htmlの

<div id="app"> 

    <select class="form-control" v-model="selected"> 
    <option v-for="item in items" :value="item.val" :key="item.id"> 
    {{ item.val }} 
    </option> 
    </select> 

    <p> 
    {{ selected }} 
    </p> 

    <input v-model="selected" placeholder="," type="text" /> 

</div>