简体   繁体   中英

Pass an object in v-model with VuejS

I'm having trouble with v-model in vue multiselect. Multiselect requires an object to be passed into v-model to have an initial selected value so it can match that object with the options Object. Here is a sample of my code:

<b-tr v-for="(income, index) in this.incomes" :key="income.id">
     <b-td>
          <multiselect
            :options="selectAccount"
            v-model="{id:income.account_id,account:income.accounts.account}"
            label="account"
            track-by="id"
          ></multiselect>
        </b-td>
</b-tr>

Vue does not accept passing an Object into v-model this way and I can't figure out another way to do this.

Here is the incomes Object:

incomes: Array
  0: Object
    account_id:
    accounts: Object
      account: 
      id:
    amount:
    id:
    date:

Options:

options: Array[3]
  0: Object
    account:
    id:

You can make v-model related to an array that you pass each element by index of main array like:

v-model="selected_options[index]"

and set selected_value as an array:

selected_options: []

Can't use v-model with multiple values:

"Component v-model is designed for single value input components that attend to similar use cases for native input elements.

For a complex component that manages the synchronization of more than one values, explicit prop/event pairs is the proper solution. In this particular case I don't think the saved keystrokes are worth the added complexity of additional syntax."

PS. Support for multiple values with v-model is coming in Vue v3 at the end of Q1/20, with syntax like v-model:id="income.account_id"

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM