Vue 多选数据绑定

Question

我终于发现了一个出色的可搜索选择 Vue 组件，https://github.com/monterail/vue-multiselect。

唯一的问题是，如果您将对象数组作为选项提供给它，数据将绑定到整个对象，而不仅仅是值。

这是在我的任务开始前 8 小时奇怪地创建的问题：

https://github.com/monterail/vue-multiselect/issues/263

我肯定错过了什么。非常感谢任何帮助。

Answer 1

过滤选项并使用自定义标签。

let types = [
  {id: 1, name: "john"},
  {id: 2, name: "steve"}
];

<multiselect 
  v-model="rule.id" 
  :options="types.map(type => type.id)" 
  :custom-label="opt => types.find(x => x.id == opt).name">
</multiselect>

有关更多信息，请查看此 github问题。

Answer 2

根据vue-multiselect的文档显示：

• 可用选项数组：对象、字符串或整数。
• 如果是对象数组，可见标签将默认为 option.label。
• 如果labalprop 被传递，label 将等于 option['label']
• @type {Array} */ options: { 类型：数组，必需：true },

因此，它应该绑定到所提供列表的整个对象，并且该选项可以分配给对象的 label 属性，如下所示：

[... { 标签：“选项1”，其他数据.. }，{ 标签：“选项2”，其他数据.. }，]...