我正在使用名为Vue-Multiselect的“类型和搜索”插件，以使用户能够在数据库中搜索客户名称。如果名称存在于数据库/下拉列表中，那么他们可以选择该名称，它将自动填充字段。

但是，如果名称不存在，我如何使用户能够在字段中键入新名称？方案：用户想要添加数据库中不存在的新名称 注意：我确实有一个ApiService，将在表单提交时过帐到该名称。

  

这是我的模板代码（也可以在JSFIDDLE中找到）：

<multiselect 
    v-model="customer_last_name" 
    :options="options"
    placeholder="Select an existing customer or type to add a new one"
    :custom-label="customerSelectName"
    label="lastname"
    track-by="uid"
    :close-on-select="true" 
    :clear-on-select="false" 
    :hide-selected="true" 
    :preserve-search="true"  
    id="example"
    @select="onSelect"
  >
  </multiselect>

<!--           <label for="customer_first_name_input">First Name:</label><br>
          <input id="customer_first_name_input" type="text" v-model="customer_first_name" /> -->

  

脚本：

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },data: {
    customer_last_name: '',customer_first_name: '',options: [{"uid":"1","firstname":"John","lastname":"Doe","email":"johndoe@aol.com","phone":null,"c_organization":"ACME","c_title":null},{"uid":"2","firstname":"Mary","lastname":"Smith","email":"msmith@aol.com","c_organization":"NBA","c_title":"Miss"}]
    },methods: {
    customerSelectName (option) {
      return `${option.lastname},${option.firstname}`
    },onSelect (option,uid) {
        console.log(option,uid)
    }
  }
}).$mount('#app')