Vue多选不显示所有选项

Question

我在Vue组件中使用https://vue-multiselect.js.org。我正在使用AJAX更新选择列表选项，并且在检查器中看到有10个值。

但是当我实际单击多选列表时，我只看到这些项目的一个子集，我不知道为什么。...这是我的多选道具/事件：

<multiselect
        v-model="organization"
        :allow-empty="true"
        :loading="loading"
        :options="organizationSearch"
        :preserve-search="true"
        @search-change="searchOrganizations"
        @select="organizationSelected"
        @remove="organizationDeselected"
        placeholder="Search Organizations"
        label="name"
        track-by="id"
        class="multiselect my-3"
>

</multiselect>

Answer 1

如果在检查器中展开options数组，可能会更有帮助，这样我们就可以看到对象中呈现了哪些属性。

  

track-by用于标识选项列表中的选项，因此其值必须唯一。

您设置了track-by="id"和label="name"，因此您的options数组应如下所示：

options: [
  { id: 1, name: 'Option #1' },
  { id: 2, name: 'Option #2' },
  { id: 3, name: 'Option #3' },
],

请确保options数组中的所有项目都具有id属性，并且所有属性都是唯一的，因为具有相同id的项目不会出现在多选列表。

Answer 2

这取决于您的options的结构。

表明它们应该是文字值时是对象。

Answer 3

我知道了。我稍微研究了一下组件代码，发现所有选项都在options道具中，但是在filteredOptions计算字段中只有3个。我加了 :internal-search="false"插入我的组件，然后将其修复。

我认为这里的最终问题与内部过滤和通过AJAX动态更新选项之间存在冲突。

下面是实际组件定义中的filteredOptions的定义。