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>

Vue-Multiselect Desect并交叉复制所选数据

1 个答案: