使用 VuejS 在 v-model 中传递一个对象答案

【问题标题】：Pass an object in v-model with VuejS使用 VuejS 在 v-model 中传递一个对象
【发布时间】：2020-04-16 20:40:45
【问题描述】：

我在 vue 多选中遇到了 v-model 的问题。 Multiselect 需要将一个对象传递给 v-model 以具有初始选定值，以便它可以将该对象与选项 Object 匹配。这是我的代码示例：

<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 不接受以这种方式将 Object 传递给 v-model，我想不出另一种方法来做到这一点。

这里是收入对象：

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

选项：

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-reactivity vue-multiselect

【解决方案1】：

不能将v-model 与多个值一起使用：

“组件 v-model 是为单值输入组件设计的关注原生输入元素的类似用例。

对于管理多个同步的复杂组件一个值，明确的道具/事件对是正确的解决方案。在这个特殊情况我认为保存的击键不值得添加附加语法的复杂性。”

https://github.com/vuejs/vue/issues/4946

PS。 Vue v3 将于 20 年第一季度末推出对 v-model 多个值的支持，语法类似于 v-model:id="income.account_id"

【讨论】：

Multiselect 接受 v-model 的值，该值引用数据类中的对象（对不起，如果我使用了错误的术语）。 vue-multiselect.js.org/#sub-select-with-search.
@paulB 试试这个：<multiselect v-model="income" track-by="account_id" label="accounts.account"></multiselect>

【解决方案2】：

您可以使 v-model 与您通过主数组的索引传递每个元素的数组相关，例如：

v-model="selected_options[index]"

并将 selected_value 设置为数组：

selected_options: []

【讨论】：

非常感谢。这解决了我的问题。我不明白为什么这里不接受您的回答。