1

我正在使用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=""
    >

...从数组中获取活跃客户列表，然后在一个不错的选择菜单中提供它们。

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

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

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

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

我正在传递一个名为的道具noCustomer，如果是true，我需要在以下位置使用customerNone配置文件:options：

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

这是错误：

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

有没有办法可以将对象转换为customerNone对象数组？谢谢！

4

1 回答 1

0

您可以在将customerNone对象传递给<multiselect>like时将其括在括号中[customerNone]。

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

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

更新评论

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

watch: {
  noCustomer(newValue, oldValue) {
    if(newValue) {        // Checking that `noCustomer === true` 
      this.value = this.customerNone;
    }
  }
}
于 2021-02-23T13:04:47.550 回答