vue-select allowing multiple duplicates

Question

I'm dynamically creating vue-select dropdown lists that allow multiple selection. But these dropdown lists are allowing the same option being chosen. How can I change this behaviour without using v-model (since I'm creating these lists dynamically)?

Options:

 "categories": [
    {
      "id": 1,
      "name": "Math",
      "years": [
        { "id": 14, "name": "4" },
        { "id": 15, "name": "5" },
        { "id": 16, "name": "6" }
      ]
    },
    {
      "id": 2,
      "name": "Science",
      "years": [
        { "id": 11, "name": "1" },
        { "id": 12, "name": "2" },
        { "id": 13, "name": "3" }
      ]
    }
  ]

HTML:

  <div
    v-for="category in categories">
    <label>{{category.name}}</label>
    <vue-select
      :options="category.years"
      label="name"
      @input="onCategoryYearSelect"
      multiple>
    </vue-select>
  </div>

The code above is working, and it allows multiple selection. But the problem is that it's allowing the same option being selected over and over again. — jj008, Aug 12 '19 at 19:18
Oh, i see now. Can you provide your `onCategoryYearSelect` method? — Andrew Vasylchuk, Aug 12 '19 at 19:19
Currently the `onCategroyYearSelect` method doesn't do anything. I'm only using it to log the input event. — jj008, Aug 12 '19 at 19:20
Have you defined property where do you want to store selected years of categories? — Andrew Vasylchuk, Aug 12 '19 at 19:22
No, I haven't defined where to store the selected values. I'm creating these separate vue-select dropdown lists so I'm not sure how to create the properties. — jj008, Aug 12 '19 at 19:27
You have two choices: either define in in current object or define it in new data property (for example `selectedYears`), which will contain selected years of category. Which one should I use to write an answer? — Andrew Vasylchuk, Aug 12 '19 at 19:31
I'm not sure what you mean by defining it in the current object. But I'm open to seeing what a solution would look like. I tried to use a v-model on a data property but because the categories are dynamically created, I couldn't get it to work. — jj008, Aug 12 '19 at 19:40

Andrew Vasylchuk · Accepted Answer · 2019-08-12T20:13:57.147

First off you should define data property, where you will store you selected years.

It will be an object, which keys will be categories id's, and values will be selected years.

Then you should handle <vue-select> @input event, to set selected year to appropriate category.

Vue.component('vue-select', VueSelect.VueSelect)

new Vue({
  el: "#app",
  data() {
    return {
      "selectedYears": {},
      "categories": [{
          "id": 1,
          "name": "Math",
          "years": [{
              "id": 14,
              "name": "4"
            },
            {
              "id": 15,
              "name": "5"
            },
            {
              "id": 16,
              "name": "6"
            }
          ]
        },
        {
          "id": 2,
          "name": "Science",
          "years": [{
              "id": 11,
              "name": "1"
            },
            {
              "id": 12,
              "name": "2"
            },
            {
              "id": 13,
              "name": "3"
            }
          ]
        }
      ]
    }
  },
   methods: {
    inputHandler(id, e) {
      if (this.selectedYears[id] && this.selectedYears[id].find(item => item.id === e.id)) return;
      
      this.$set(this.selectedYears, id, e);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
  <div>
    <div v-for="category in categories" :key="category.id">
      <label>{{ category.name }}</label>
      <vue-select :options="category.years" label="name" multiple @input="inputHandler(category.id, $event)">
      </vue-select>
    </div>
    <h1>{{ selectedYears }}</h1>
  </div>
</div>

I don't know why this is not working for me, I'm still able to input duplicate options. What part of the code is making sure that duplicates are not allowed? — jj008, Aug 12 '19 at 20:07
Do your categories update when change the value? I can write checking, that will prevent duplicates. — Andrew Vasylchuk, Aug 12 '19 at 20:11
Yes, I select `1`, then `2`, then I'm able to select `1` again. — jj008, Aug 12 '19 at 20:11

vue-select allowing multiple duplicates

1 Answers1