0

我正在使用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  }}</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 脚本：

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

1 回答 1

0

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

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

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

当您选择一个选项时，这将为您的变量分配您获得的对象的属性。

于 2019-11-07T14:48:21.403 回答