Vue-Multiselect Multiple Select Able To Reselect Selected Item

Question

Using Vue-Multiselect library with multiple selections enabled, is it possible to reselect the selected item/s? Let's say there are two options Product 1 and Product 2:

options: [
    { name: 'Product 1', value: 'product_1' },
    { name: 'Product 2', value: 'product_2' }
]

Then I will select Product 1 multiple times so the result would be:

[
  {
    "name": "Product 1",
    "value": "product_1"
  },
  {
    "name": "Product 1",
    "value": "product_1"
  }
]

It would be something like:

How to achieve this behavior?

PS I'm open to using other Vue 3 select libraries with multiple items and duplication of selected items.

Debug Diva · Answer 1 · 2022-05-30T08:18:39.443

As @mamdasan said, To achieve this requirement you can listen to @input event which emitted after v-model value changes. To get the duplicate selected options you can maintain a separate array and empty the v-model variable while listening to @input event.

Note : I am facing one challenge while working on this requirement is to display the chips on selection as v-model value got empty.

Demo :

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      selectedItems: [],
      options: [
                 {
                   "city": "San Martin"
                 },
                 {
                   "city": "San Nicolas"
                 },
                 {
                   "city": "San Francisco"
                 }
               ]
    }
  },
  methods: {
    onSelect() {
  this.selectedItems.push(this.value[0]);
      this.value = [];
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
<div>
  <multiselect
    v-model="value"
    placeholder="Select City"
    label="city"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    @input="onSelect"
  >
  </multiselect>
</div>
<pre class="language-json"><code>{{ selectedItems }}</code></pre>
</div>

score 1 · Answer 2 · answered May 23 '22 at 04:53

1

first listen for changes on your multiselect v-model, every time is changes, add the selected item to an array and empty the multiselect v-model object.

then add this slot in your multi-select:

<template slot="selection" slot-scope="{ values, search, isOpen }">
     <span class="multiselect__single" v-if="theTalkedArray"> 
       {{ values.length }} options selected
     </span>
</template>

basically you create an array, every time the user clicks on multiselect, you add to your array and empty the select value again, and then show the selected items to user

answered May 23 '22 at 04:53

Mamdasan

323
1
6

Hi, thanks for answering. Is it possible to do it something like this https://forum.vuejs.org/uploads/default/original/3X/a/5/a5bba8d75c337f495225cae27dd55f22b4600fe6.png? – user3233787 May 23 '22 at 07:15
yes yes. i answered with this result in mind. you can add to an array each time your user clicks on an option in multiselect, and use the 'selection' slot to show that array, but you need to design those 'cards' with delete icon yourself. its super easy. – Mamdasan May 23 '22 at 07:28
Hi, thanks for the response. Will try this one then will accept the answer afterwards. Thank you very much! – user3233787 May 24 '22 at 01:12
I also noticed that the template slot selection is not working in version ^3.0.0-alpha.2 for Vue 3. Is the example above using Vue 2? – user3233787 May 24 '22 at 01:50
This is the repository for Vue 3 https://github.com/shentao/vue-multiselect/tree/next – user3233787 May 24 '22 at 03:02

score 0 · Answer 3 · answered Nov 17 '22 at 11:53

`template

    <div class="form-group">
          <label class="mt-3">activities</label>
          <multiselect
            key="id"
            v-model="form.activities"
            :options="options"
            :class="{'is-invalid': submitted && $v.form.activities.$error}"
            :custom-label="Label"
            track-by="id"
            :multiple="true">
          </multiselect>
          <div v-if="submitted && !$v.form.activities.required" 
   class="invalid-feedback">
            required field
          </div>
        </div>

      script 

      options: [
              {
              id: 1,
      title: 'option 1'
    },
    {
      id: 2,
      title: 'option 2'
    },
    {
      id: 3,
      title: 'option 3'
    },
    {
      id: 4,
      title: 'option 4'
    },
  ],


      methode: {
          Label (option) {
             return option.title
            },
         }`

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 23 '22 at 06:16

Vue-Multiselect Multiple Select Able To Reselect Selected Item

3 Answers3