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

问题

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?

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

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.

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

回答1:

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.

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.

来源：https://stackoverflow.com/questions/58750770/vue-multiselect-how-to-autopopulate-rest-of-input-fields-after-first-selection

标签

Vue.js

vue-multiselect