Javascript 如何将选择框与vuejs中的输入绑定？

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

新建
选择选项，否则该选项应与其中一项匹配

<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">

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

Js

Html


{{item.val}}

{{selected}}

您可以绑定到
更改
，并在模型值更新后触发，如下所示：


@{{item.name}
当用户在输入元素中添加文本时，应如何在选择中选择该文本？你的意思是他们输入的内容应该作为选项添加吗？是的！它应该将输入绑定到select，这样用户将有两个选项，一个是从select获取的，另一个是如果他想要自定义，您将输入绑定到哪里？@Adriankevin input绑定在相同的数据attr
selected
上，因此它与select框共享相同的值。好的，如果已经将其他attr从输入放到汽车上，例如，我需要学习如何绑定它：）正常情况下，我与v-model绑定，我看不到：）loool现在我看到了你把它放在了selected抱歉被坏了：）当我输入数据时，我能看到谁在SelecttheBind中的选项起作用，但它没有显示出来。
 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);
      },

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

<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>