Vue MultiSelect - как позволить пользователю добавить новое имя, которого нет в списке данных? - PullRequest
Новая
       43

Vue MultiSelect - как позволить пользователю добавить новое имя, которого нет в списке данных?

0 голосов
/ 06 ноября 2019

Я использую плагин "type and search" под названием Vue-Multiselect , чтобы дать пользователю возможность искать имя клиента в базе данных. Если имя существует в базе данных / раскрывающемся списке, они могут выбрать это имя, и оно автоматически заполнит поля.

Однако, если имя не существует, как я могу дать пользователю возможность ввести новое имя в поле? Сценарий: Пользователь хочет добавить новое имя, которого нет в базе данных Примечание: у меня есть ApiService, к которому я буду отправлять POST при отправке формы.

Вот мой код шаблона (также доступен в 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","phone":null,"c_organization":"NBA","c_title":"Miss"}]
    },
  methods: {
    customerSelectName (option) {
      return `${option.lastname}, ${option.firstname}`
    },
    onSelect (option, uid) {
        console.log(option, uid)
    }
  }
}).$mount('#app')

1 Ответ

0 голосов
/ 06 ноября 2019

Библиотека vue-multiselect позволяет это с функциональностью tags.

, вам необходимо добавить :taggable="true" @tag="addTag" :multiple="false"

и добавить метод addTag: 

addTag (newTag) {
  const parts = newTag.split(', ');

  const tag = {
    uid: this.options.length + 1,
    firstname: parts.pop(),
    lastname: parts.pop()
  };
  this.options.push(tag);
  this.customer_last_name = tag;
}

Это просто пример метода, который преобразует входные данные Chavez, Martha в: 

{
  "uid": 3,
  "firstname": "Martha",
  "lastname": "Chavez"
}

Вы можете обновить эту функцию, чтобы она лучше соответствовала вашим потребностям

jsfiddle: https://jsfiddle.net/dapo/nwvpd4m2/

...