我正在使用Vue-Multiselect插件,并且想知道当用户从初始下拉列表中选择一项时如何自动填充其他输入字段(customer_firstname
和customer_email
)吗?
方案::如果该名称存在于数据库/下拉列表中,则用户可以选择该名称,Vue将自动填充其余输入字段(取自{{1} }数组)。否则,如果名称不存在,则用户可以为每个其他输入字段(例如options
,customer_firstname
)标记/创建一个新值。
这是我的JSFIDDLE代码,可以正常工作, 只需要帮助接线,即可根据customer_email
下拉列表的初始选择自动填充其余输入字段。
Vue模板:
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>