Vue-Multiselect Desect and cross duplicates the selected data

Question

I am using below code:

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

Issue is on selecting any value from the drop-down it shows up in the multi select box but i am not able to deselect it either by cross or by deselecting it from the drop-down itself. Can someone please help ?

Answer 1

You have to use track-by to solve this problem.Here is the solution.

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/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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>