javascript - 我如何将选择框与Vue.js中的输入绑定(bind)？

我尝试将选择框与输入绑定，因此我有一个带有预定义选项的选择框，当选中时，该选项将出现在输入中，当用户在输入中键入文本时，如果不在预定义列表中，则应生成动态选择选项，否则应在其中一个项上匹配。

<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);
      },

最佳答案

对输入使用相同的数据属性，检查两个输入共享数据的方式。这是最简单的方法。请注意，要使“选择”框现在选择正确的选项，必须输入匹配的值。不知道原因是什么，你需要这样，但它不是用户友好。
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>