如何将响应式数据加载到vueform/multiselect多选组件中？

问题原因 #

vueform/multiselect 组件处理字符串数组时可以直接渲染文本，当传入对象数组时，需要显式指定对象中要作为选项展示文本的字段，否则组件无法识别要渲染的内容，就会出现无选项展示的情况。

修复方案 #

方案1：指定组件的label属性 #

在Multiselect组件上添加label属性，绑定你需要展示的对象字段，你当前的对象字段为name，修改组件代码如下：

<Multiselect :options="testData" label="name" />

如果需要自定义选项的返回值，还可以额外添加value-prop属性指定值对应的字段，示例：

<Multiselect :options="testData" label="name" value-prop="name" />

方案2：统一options格式为字符串数组 #

你也可以在computed中直接将返回值处理为字符串数组，和你已经验证可用的格式保持一致：

const testData = computed(() => {
  return [
    "Test"
  ]
})

修改后组件即可正常渲染选项。

内容的提问来源于stack exchange，提问作者Dave