1

您好，我在 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)它将只显示第一个选定的项目。

有谁知道我怎样才能获得确切的选定项目，以便我可以使用这种过滤器进行搜索，因为基本上，我将使用它作为搜索过滤器。

谢谢你！

4

1 回答 1

1

请参阅此代码框以获取工作示例：https ://codesandbox.io/s/1yml74p9xj

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

  • App.vue（是否将多选全局添加到 vue）
  • index.html（样式的 css 导入）
  • HelloWorld.vue（用于代码）

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

于 2018-10-30T08:22:49.390 回答