javascript - Vue多选数据绑定(Vue Multiselect Data Binding)

Question

I finally discovered an outstanding searchable select Vue component, https://github.com/monterail/vue-multiselect .

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

The only problem is, if you feed it an array of objects as options, the data binds to the entire object, not just the value.

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

Here is the issue which oddly was created 8 hours before my quest began:

(这是我的任务开始前8小时奇怪地产生的问题：)

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

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

I must be missing something.

(我肯定错过了什么。)

Any help greatly appreciated.

(任何帮助，不胜感激。)

  ask by Bryan translate from so

Answer 1

According to the documentation of vue-multiselect, it shows that:

(根据vue-multiselect的文档，它显示：)

• Array of available options: Objects, Strings or Integers.

  (可用选项的数组：对象，字符串或整数。)

• If array of objects, visible label will default to option.label.

  (如果是对象数组，则可见标签将默认为option.label。)

• If labal prop is passed, label will equal option['label']

  (如果通过了labal道具，标签将等于option ['label'])

• @type {Array} */ options: { type: Array, required: true },

  (@type {Array} * /选项：{type：Array，必填：true}，)

So, it's expected to bind to entire object of provided list, and the option may be assigned to the object's label property, like this:

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

[... { label: "option1",otherdata.. }, { label: "option2",otherdata.. }, ]...

([... {标签：“ option1”，otherdata ..}，{标签：“ option2”，otherdata ..}，] ...)