1

我正在尝试使用 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：选择一个组件后，我没有添加更多选项的选项。相反，我可以在所有选项中选择仅删除它。

4

1 回答 1

0

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

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

根据文档（https://vue-multiselect.js.org/）：

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

于 2020-02-29T18:49:47.143 回答