Vue-Multiselect:首次选择后如何自动填充其余输入字段?

问题描述

我正在使用 Vue-Multiselect 插件，想知道当用户从初始下拉列表中选择一项时如何自动填充其他输入字段(customer_firstname和customer_email)吗?

I am using Vue-Multiselect plugin and want to know how I can auto populate additional input fields (customer_firstname and customer_email) when a user selects an item from the initial drop down?

场景::如果名称存在于数据库/下拉列表中，则用户可以选择该名称，Vue将自动填充其余输入字段(取自options数组) ).否则，如果名称不存在，则用户可以为每个其他输入字段(例如customer_firstname，customer_email)标记/创建一个新值.

Scenario: If the name exists in the database/drop-down list the user can then select that name and Vue will auto populate the rest of the input fields (taken from the options array). Else, if the name does not exist, the user can tag/create a new value for each additional input fields (e.g, customer_firstname, customer_email).

这是我的 JSFIDDLE 代码，可以正常工作， 只需要有助于根据lastname下拉菜单的初始选择自动填充其余输入字段.

Here's my JSFIDDLE code with evertying working, just need help wiring up the ability to autopopulate the rest of the input fields based on the initial selection of the lastname dropdown.

    <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  }}</code></pre>
        <br>
        <br>
        <br>
        <label for="customer_first_name_input">First Name:</label><br>
        <input id="customer_first_name_input" type="text" v-model="customer_first_name" />
        <br>
        <label for="customer_emailt">Email:</label><br>
        <input id="customer_email" type="email" v-model="customer_email" />
      </div>
    </div>

    new Vue({
        components: {
        Multiselect: window.VueMultiselect.default
        },
        data: {
        customer_last_name: '',
        customer_first_name: '',
        customer_email: '',
        options: [{"uid":"1","firstname":"John","lastname":"Doe","email":"[e-mail]","phone":null,"c_organization":"ACME","c_title":null}, {"uid":"2","firstname":"Mary","lastname":"Smith","email":"[e-mail]","phone":null,"c_organization":"NBA","c_title":"Miss"}, {"uid":"3","firstname":"Mike","lastname":"Verlander","email":"[e-mail]","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')

推荐答案

您几乎拥有了所需的一切.您的方法onSelect会附加到多选对象的select事件中，因此您可以使用它.

You pretty much have everything you need. Your method onSelect is appended to the select event of your multiselect, so you can just use it.

在您的onSelect方法中，添加以下行:

In your onSelect method, add these lines:

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

这将为您的变量分配选择选项时获得的对象的属性.

That will assign to your variables the properties of the object you get when you select an option.

这篇关于Vue-Multiselect:首次选择后如何自动填充其余输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！