Vue Multi-select 未显示所有选项

Question

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

但是当我实际点击 multiselect 列表时，我只看到了这些项目的一个子集，我不明白为什么......这是我的 multi-select props/events:

<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的结构。

它表明它们是对象，而它们可能应该是文字值。

Answer 2

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

track-by is used to identify the option within the options list thus it’s value has to be unique.

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

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

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

Answer 3

我明白了。我深入研究了组件代码，发现所有选项都在 options 属性中，但在 filteredOptions 计算字段中只有 3 个。我加了 :internal-search="false" 进入我的组件，然后修复它。

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

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

Vue Multi-select 未显示所有选项

Vue Multi-select not showing all the options

vue.js

vue-multiselect