1

我在我的 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>
4

3 回答 3

4

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

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

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

在此处输入图像描述

于 2019-09-06T15:19:41.463 回答
1

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

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

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

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

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

于 2019-09-05T22:19:45.303 回答
0

这取决于您的options.

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

于 2019-09-05T21:31:00.560 回答