Question

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

<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

使用相同的数据attr作为输入，检查js fiddle两种输入共享数据的方式。这是最简单的方法。请注意，要选择框以选择正确的选项，您必须输入匹配的值。不知道你需要这种方式的原因是什么，但它并不是用户友好的。

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

Answer 2

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

<select class="form-control" v-model="selected" @change="doSomethingWithChangedValue">
    <option v-for="item in inventory" :value="item" :key="item.id">
      @{{ item.name }}
    </option>
</select>

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

2 个答案: