正确实现 Vue 多选时出错答案

【问题标题】：Error in implementing Vue multiselect properly正确实现 Vue 多选时出错
【发布时间】：2020-02-29 18:42:31
【问题描述】：

我正在尝试使用 vue-multiselect 构建一个下拉列表，但我遇到了问题。选择第一个选项后，它工作正常。但是，当我尝试选择另一个选项时，之前选择的选项也会消失。下面给出的是我正在使用的代码：

<template>
<div>
    <app-header></app-header>

    <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options.campaign_name" :multiple="true" :taggable="true" @tag="addTag1" style="width:200px"></multiselect>

    <app-footer></app-footer>
</div>
</template>

<script>
import Header from './components/header.vue'
import Multiselect from 'vue-multiselect'
import Footer from './components/footer.vue'
export default {
    components: {
        'app-header': Header,
        'app-footer': Footer,
        'multiselect': Multiselect
    },
    data() {
      return {
        value: [
            { name: 'chess', code: 'js' }
        ],
        options:{
          campaign_name:[{name:"Chess", code:"js"},{name: "Badminton",code:"js"}],
          vmw_platform_test:[],
          release_version:[]
        },
      }
    },
    methods: {
    addTag1 (newTag) {
      const tag = {
        name: newTag,
        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      this.options.campaign_name.push(tag)
      this.value.campaign_name.push(tag)
    }
  }
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>

</style>

我想这一定与我传递数据的方式有关，但这实际上是我需要传递数据的方式，以便了解更大项目的行为。任何帮助表示赞赏。

编辑 1：选择一个组件后，我没有添加更多选项的选项。相反，我可以在所有选项中选择仅删除它。

【问题讨论】：

标签： vue.js vue-multiselect

【解决方案1】：

在您的示例中，您有两个具有相同 code 值的选项，并且您已将要跟踪的 code 属性设置为将被推送到所选选项的 value 数组中的键。尝试改变这个：

 campaign_name:[{name:"Chess", code:"chess"},{name: "Badminton",code:"badminton"}],

根据文档 (https://vue-multiselect.js.org/)：

track-by 用于识别选项列表中的选项，因此它的值必须是唯一的。在此示例中，name 属性在所有选项中都是唯一的，因此可以用作跟踪值。

【讨论】：