Vue-Multiselect：如何在第一次选择后自动填充其余输入字段？

Question

我正在使用 Vue-Multiselect 插件，想知道如何在用户 select 一个项目时自动填充额外的输入字段（customer_firstname 和 customer_email）从最初的下拉？

场景： 如果名称存在于 database/drop-down 列表中，用户可以 select 该名称，Vue 将自动填充输入的其余部分字段（取自 options 数组）。否则，如果该名称不存在，用户可以 tag/create 为每个额外的输入字段输入一个新值（例如，customer_firstname、customer_email）。

这是我的 JSFIDDLE 代码，可以正常工作，只需要帮助连接根据初始 [=36= 自动填充其余输入字段的能力lastname 下拉菜单的 ]ion。

Vue Template:

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

Vue Script:

    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')

Answer 1

你几乎拥有你需要的一切。您的方法 onSelect 已附加到您的 multiselect 的 select 事件中，因此您可以直接使用它。

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

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

这会将您在 select 一个选项时获得的对象的属性分配给您的变量。

Vue-Multiselect：如何在第一次选择后自动填充其余输入字段？

Vue-Multiselect: How to autopopulate rest of input fields after first selection made?

vue.js

vue-multiselect