Error in implementing Vue multiselect properly

Question

I am trying to build a dropdown using vue-multiselect, where I am facing an issue. Upon selecting the first option, it works fine. However, when I try to select another option, the earlier selected option also disappears. Given below is the code which I am using:

<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>

I guess it must have something to do with the way I am passing the data, but this is actually how I need data to be passed, in order to learn the behavior of a bigger project. Any help is appreciated.

EDIT 1: Upon selecting one component, I am not getting the option to add more options. Instead I am getting the option of only removing it, on all the options.

Nikola Kirincic Nikola Kirincic · Accepted Answer · 2020-02-29T18:49:47

In your example, you have two options with same code value, and you have set the code property to be tracked as the key that will be pushed into the value array of selected options. Try changing this:

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

As per the docs (https://vue-multiselect.js.org/):

track-by is used to identify the option within the options list thus it’s value has to be unique. In this example the name property is unique across all options, so it can be used as track-by value.

Error in implementing Vue multiselect properly

1 Answers