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;
    }
  }
}