vue.js - Vue-Multiselect 对选中的数据进行剖析和交叉复制

Question

我正在使用以下代码：

<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"
        }],
}
}

问题是从下拉列表中选择任何值，它显示在多选框中，但我无法通过交叉或从下拉列表本身中取消选择它来取消选择它。有人可以帮忙吗？

Answer 1

你必须使用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>