Question

您好，我在Vue中进行了多次选择，我的问题是我没有从所选项目中获取确切数据

这是我的代码

<multiselect v-model="itemValue"
    :show-labels="false"
    :options="itemObj"
    :multiple="true"
    :close-on-select="false"
    :clear-on-select="false"
    :hide-selected="true"
    :preserve-search="true"
    label="itemName" track-by="itemName"
    :preselect-first="true"
    placeholder="List of Items"
    @select="selectItem($event)">
        <template slot="selection" slot-scope="itemValue"></template>
</multiselect>

<!---- TO SHOW THE CURRENT SELECTED ITEM ID --->
<pre>{{itemValue.map(a => a.id)}}</pre>

当我尝试在选择项中选择一个项目时，就可以在<pre>上看到所选择的项目ID，但是当我尝试console.log(itemValue)时，它不会显示任何内容，但是如果我将选择另一个项目，现在必须有2个选定的项目显示在<pre>中，但是在我的console.log(itemValue)中，它将仅显示第一个选定的项目。

有人知道如何获得确切的选定项目，以便能够使用这种过滤器进行搜索，因为基本上，我会将其用作搜索过滤器。

谢谢！

Answer 1

有关工作示例，请参见此代码和框：https://codesandbox.io/s/1yml74p9xj

您的代码中存在一些问题，但是您可以看到该示例如何使其工作。要查看的3个文件：

App.vue（将多选内容全局添加到vue中）
index.html（用于样式导入css）
HelloWorld.vue（用于代码）

在我的示例中，selectedItems包含从Vue多重选择中选择/取消选择的项目

Vue-Multi-Select获取数据数组

1 个答案: