Vue-Multiselect: как автоматически заполнить остальные поля ввода после первого выбора? - PullRequest
Новая
       32

Vue-Multiselect: как автоматически заполнить остальные поля ввода после первого выбора?

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

Я использую плагин Vue-Multiselect и хочу узнать, как можно автоматически заполнять дополнительные поля ввода (customer_firstname и customer_email), когда пользователь выбирает элемент изначальный выпадающий?

Сценарий: Если имя существует в базе данных / раскрывающемся списке, пользователь может затем выбрать это имя, и Vue автоматически заполнит остальные поля ввода (взятые из options массив). Иначе, если имя не существует, пользователь может пометить / создать новое значение для каждого дополнительного поля ввода (например, customer_firstname, customer_email).

Вот мой JSFIDDLE код с вечно работающим, просто нужна помощь для подключения возможности автоматического заполнения остальных полей ввода на основе начального выбора lastname.

Шаблон Vue: 

    <div id="app">
      <div>
        Last Name:
        <multiselect id="dontforget" v-model="customer_last_name" :options="options" placeholder="Select an existing customer or type to add a new one" label="lastname" :custom-label="customerSelectName" track-by="uid" :close-on-select="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" @select="onSelect" :taggable="true" @tag="addTag" :multiple="false" tag-placeholder="Add customer as new customer">
          <template slot="singleLabel" slot-scope="props">{{ props.option.lastname }}</template>
          <template slot="option" slot-scope="props">
            <span style="font-weight: bold;">{{ props.option.lastname }}</span>, {{ props.option.firstname }} -- <small>{{props.option.email}}</small>
          </template>
          <template slot="noResult">no rsults brah</template>
        </multiselect>
        <pre class="language-json"><code>Data: {{ customer_last_name  }}



Имя:

E-mail:

Vue Сценарий: 

    new Vue({
        components: {
        Multiselect: window.VueMultiselect.default
        },
        data: {
        customer_last_name: '',
        customer_first_name: '',
        customer_email: '',
        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"}, {"uid":"3","firstname":"Mike","lastname":"Verlander","email":"asdafsdf@aol.com","phone":null,"c_organization":"MLB","c_title":"Mr"}]
        },
      methods: {
        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;
        },
        customerSelectName (option) {
          return `${option.lastname}, ${option.firstname}`
        },
        onSelect (option, uid) {
            console.log(option, uid)
        }
      }
    }).$mount('#app')

1 Ответ

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

У вас есть все, что вам нужно. Ваш метод onSelect добавляется к событию select вашего мультиселектора, так что вы можете просто использовать его.

В своем методе onSelect добавьте следующие строки: 

this.customer_first_name = option.firstname;
this.customer_email = option.email;

Это назначит вашим переменным свойства объекта, который вы получаете, когда выбираете опцию.

...