Vue-Multiselect剖析并交叉复制所选数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-Multiselect剖析并交叉复制所选数据相关的知识，希望对你有一定的参考价值。
我正在使用以下代码：
<multiselect v-model="selectedmultiSpecialistName"
placeholder="Select Quality Specialist"
:options="specialistInfo"
:label="specialistName"
:close-on-select="false"
:multiple="true"
></multiselect>
data()
return
selectedmultiSpecialistName:[],
specialistInfo: [
"specialistName": "Andrew Malizia",
"specialistCode": "AMalizi1"
,
"specialistName": "Antony Aemisegger",
"specialistCode": "AAemise"
],
问题是从下拉列表中选择任何值，它显示在多重选择框中，但是我无法通过叉号或从下拉菜单本身中取消选择来取消选择它。有人可以帮忙吗？
答案
您必须使用track-by解决此问题。这是解决方案。
Vue.component('multiselect', window.VueMultiselect.default);
var vue = new Vue(
el: "#app",
data()
return
selectedmultiSpecialistName: [],
specialistInfo: [
"specialistName": "Andrew Malizia",
"specialistCode": "AMalizi1"
,
"specialistName": "Antony Aemisegger",
"specialistCode": "AAemise"
],
,
)<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
<multiselect v-model="selectedmultiSpecialistName" placeholder="Select Quality Specialist" track-by="specialistCode" :options="specialistInfo" label="specialistName" :close-on-select="false" :multiple="true"></multiselect>
</div>以上是关于Vue-Multiselect剖析并交叉复制所选数据的主要内容，如果未能解决你的问题，请参考以下文章
在 vue-multiselect 中测试 vuex 操作时调用了 Jest 预期的模拟函数