Vue-multiselect：如何将对象转换为数组以用于选项道具？

Question

我正在使用 vue-multiselect 是这样的：

    <multiselect
      id="customer_last_name_input"
      v-model="value"
      :options="activeUserProfiles"
      label="lastname"
      placeholder="Select or search for an existing customer"
      track-by="uid"
      :close-on-select="true"
      @select="onSelect"
      @remove="onRemove"
      :loading="isLoading"
      :custom-label="customerSelectName"
      aria-describedby="searchHelpBlock"
      selectLabel=""
    >

...从数组中获取活跃客户列表，然后在漂亮的 select 菜单中提供它们。

这很好用。但是，我需要从另一个资源（称为 customerNone）向 options 道具添加另一个选项，但数据作为对象返回，如下所示：

{"uid":1,"lastname":"None Given","firstname":"User","email":null,"phone":null.. .blah}

vue-multiselect 文档声明 :option 道具必须是一个数组。

问题：我在 vue-multiselect 组件中处理这个问题的最佳方式是什么？这是我试图帮助解释我正在尝试做的事情（不确定这是否是处理它的最佳方法）。 不幸的是，我的尝试导致控制台错误（见下文）：

我正在传递一个名为 noCustomer 的道具，如果是 true，我需要在 :options:

上使用 customerNone 配置文件

<multiselect
      :options="noCustomer ? customerNone : getActiveUserProfiles"
>

这是错误：

Invalid prop: type check failed for prop "options". Expected Array, got Object

有什么方法可以将 customerNone 对象转换为对象数组？ 谢谢！

Answer 1

您可以在将 customerNone 对象传递给 <multiselect> 时将其括在方括号中，例如 [customerNone].

此语法动态创建一个新数组，其中 1 个元素是对象变量：

<multiselect
  :options="noCustomer ? [customerNone] : getActiveUserProfiles"
>

评论更新

为了在通用选项可用时自动select，请在 noCustomer 属性上使用 watch 以在 noCustomer === true 时设置 value :

watch: {
  noCustomer(newValue, oldValue) {
    if(newValue) {        // Checking that `noCustomer === true` 
      this.value = this.customerNone;
    }
  }
}

Vue-multiselect：如何将对象转换为数组以用于选项道具？

Vue-multiselect: How to convert object to array for use in options prop?

javascript

vue.js

vuejs2

vue-component

vue-multiselect