正确实现Vue多选时出错

Question

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

<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：在 selecting 一个组件后，我无法获得添加更多选项的选项。相反，我在所有选项上都可以选择只删除它。

Answer 1

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

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

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

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

正确实现Vue多选时出错

Error in implementing Vue multiselect properly

vue.js

vue-multiselect