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

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

方案::如果该名称存在于数据库/下拉列表中,则用户可以选择该名称,Vue将自动填充其余输入字段(取自{{1} }数组)。否则,如果名称不存在,则用户可以为每个其他输入字段(例如optionscustomer_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>
zhang_box 回答:Vue-Multiselect:首次选择后如何自动填充其余输入字段?

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

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

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

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

本文链接:https://www.f2er.com/3144097.html

大家都在问