Vue-multiselect：如何将 object 转换为数组以在选项道具中使用？

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道具，但数据以 Object 的形式返回，如下所示：

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

vue-multiselect 文档 state 说: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 object 转换为 object 数组？ 谢谢！

Answer 1

您可以在将customerNone object 传递给<multiselect>时将其包裹在括号中，例如[customerNone] 。

此语法即时创建一个新数组，其中包含 1 个元素，即 object 变量：

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

更新评论

为了在通用选项可用时自动选择它，请在noCustomer === true时使用noCustomer道具上的watch来设置value ：

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