Greetings,

I needed on an application to have a button that resets my filters. Since i didn't had an event on vue-multi-select that deselects all the options, i had to clear the model, make a ref on it and call:

this.$refs['vue-multi-select'].selectCurrent({ selectAll: true, func: function () { return true } })

I tried to use the deselect function from the component through the ref which has a typo: "deselctAll()" but it generated label bugs.

Wanted just to notice this and ask for an event that selects/deselects all in future.

I like this component a lot, good job!

On tablet ios (ipad gen5), first click into multi-select is show dropdown, then I click outside, dropdown still in there (do not "display:none"). Except, I click into input, select, other something (has an event)

Hi,
how to trigger this programmatically??
open/close multiselect by other button click,,

Hello, is there an easy way to cancel selected options? Here's what I did but is not working. All the values are getting updated as expected but don't see the checkboxes/ui getting updated. What am I missing?

1. At the end of initValues() function, copy valueSelected to a new variable previousSelected.
   this.previousSelected = this.valueSelected.slice(0);
2. Add cancel function
   cancel(){
   this.valueSelected = this.previousSelected;
   this.filter();
   this.$emit('input', this.valueSelected.slice(0));
   this.$emit(this.eventName, this.valueSelected.slice(0));
   },

Pasting the js file below. Changes highlighted in bold.

Thanks!

Hi, I was wondering if using an array with just string values is possible with the multi-select. Looking at the examples and briefly in the source code this doesn't seem possible? If not, any interest in adding it?

Example:

data: [{
        name: 'first group',
        list: [
        "Alabama",
        "Alaska",
        "American Samoa",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware"
      ]
}]

I have the following code:

<multiselect  v-model="selectedTypes" :select-options="types" 
  :options="{multi: true, groups: false}">
 </multiselect>`

In one of my functions I call this.selectedTypes.splice(0,this.selectedTypes.length); to reset the array (deselect all) - it is part of resetting the whole form. However, the widget remains unchanged (selections are kept).

Please advise.

First off thanks for this useful component!

One small issue I observed:
Updating the data element referenced by selectOptions adds the default filter multiple times:

This seems to be caused by the watch on selectOptions which calls this.setConfig().
The last step in setConfig then adds the default filter even when it already exists:

      this.filters.unshift({
        nameAll: 'Select all',
        nameNotAll: 'Deselect all',
        func: () => true,
      });

Codesandbox with minimal example: https://codesandbox.io/s/w275qqyyxk?module=%2Fsrc%2FApp.vue

Hi,

is it possible to render html in options? I mean something like this:

renderTemplate(option) { return '<i class="flag-icon flag-icon-' + option.label.toLowerCase() + '"></i> ' + option.label; }

Right now it shows me plain text instead of country flag.

Thanks

Hey, I am trying to set the vue-multi-select button label to just display the name without the calculated select item amount, it can't seem to do that.

<vue-multi-select v-model="venueValues" :options="options" :filters="venueFilters" :btn-label="venueBtnLabel" :select-options="venueData" />
and venueBtnLabel: "venues"

With this code I still see the calculated item value in the label.

It would be cool if there were an option to include but disable a record.

Hi I have a requirement where I need to update options when the user click the the drop-down.But i can not find any event to use. How can i do it?

Is there a function or possibility to change color for no selected label or no selected group?
Thank you!

Is there any option to get last selected and last removed value in select picker

Hi, I want to use it in a project that is not compiled with bundlers.

Can you please show how to register component on a page ?

Vue.component('multi-select', ... );

Thanks

First of all thanks for your efforts on this component.

I have a problem that on mobile devices the dropdown options are hard to keep in the center of the screen. Is there a way at least to to keep the text in the center rather that aligned on one side.

Hi! Sorry for bothering, but i don't understand how to use this:

const event = (values) => {
  this.values = values;
}

Where would you put the code in your example? or this function is characteristic of the component?
If so, there is some change function? For example: <multi-select v-model="values" @change="functionName" />

Your Example:

<template>
  <div>
    <multi-select
      v-model="values"
      :options="options"
      :filters="filters"
      :btnLabel="btnLabel"
      search
      historyButton
      :searchPlaceholder="Search"
      :selectOptions="data" />
  </div>
</template>

<script>
import multiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.min.css';

export default {
  data() {
    return {
      search: 'Search things',
      btnLabel: 'A simple vue multi select',
      name: 'first group',
      values: [],
      data: [{
        name: 'first group',
        list: [
          { name: '0' },
          { name: '2' },
          { name: '3' },
          { name: '8' },
          { name: '9' },
          { name: '11' },
          { name: '13' },
          { name: '14' },
          { name: '15' },
          { name: '18' },
        ],
      }, {
        name: 'second group',
        list: [
          { name: '21' },
          { name: '22' },
          { name: '24' },
          { name: '27' },
          { name: '28' },
          { name: '29' },
          { name: '31' },
          { name: '33' },
          { name: '35' },
          { name: '39' },
        ],
      }],
      filters: [{
        nameAll: 'select <= 10',
        nameNotAll: 'Deselect <= 10',
        func(elem) => {
          return elem.name <= 10)
        },
      }, {
        nameAll: 'Select contains 2',
        nameNotAll: 'Deselect contains 2',
        func(elem) => {
          return elem.name.indexOf('2') !== -1
        },
      }],
      options: {
        multi: true,
        groups: true,
      },
    };
  },
  methods: {
  },
  components: {
    multiSelect,
  },
};
</script>

Thanks for your time.

I'm not able to load component correctly,
I'm using MaterializeCss, and vue2, any idea where this is coming from?

I've set the component like this
import multiSelect from 'vue-multi-select'; import 'vue-multi-select/dist/lib/vue-multi-select.min.css'; Vue.component('multi-select', multiSelect)

Thanks for your help!

Gretings,

In our application the user can set the size of the bootstrap 4 inputs from the project: small, medium, large.

In order to do that on this component we need to apply the following classes on the button (that has btn-select class on it): btn btn-sm, btn btn-md, btn btn-lg. Also we need to change the font-size, padding and min-width from it. (these are set default by the following css: .select .inlineBlock[data-v-1604b90e]).

Can you make a prop, or something that can give us access to customize/overwrite the button class?

Thanks!

Hi, please I am displaying my selected values in a tag format that should be deletable targeting the index and use splice.
But for some reason, I can't just splice the index I want out, once I call the splice method on the index I want it starts checking all items in the options and keeps adding to the selected

Hello , how can i disallow "un-selecting", so click on selected value again will not un-select it, I want to simulate classic select-box with single value where you cant un-select value, mainly for point that i have to have filled in value always.
Please advice :-) .

            <vue-multi-select
                    v-model="adultsValue"
                    :options="options"
                    :selectOptions="adultsDrop"
            />

Tnx for great component!

Just wanted to say - awesome component, I like it!!!

Very good job!!!

Hello,

I have been using your library and I have a problem with one thing. I tried to populate the select with data from ajax service and It works good but when I try to set default the checked options with the data in model "filters.types" it doesn't work.

There is my implementation for the plugin in my HTML
<VueMultiSelect v-model="filters.types" :btnLabel="btnLabel" :search="false" :historyButton="false" :selectOptions="data" :options="options" class="mb-3" > </VueMultiSelect>

There is the data property example of my component

data: [ { title: "", elements: [], }, ], options: { multi: true, groups: true, labelList: "elements", groupName: "title", },

activityService .types() .then((response) => { this.data[0].elements = response.data.types; }) .catch(() => {});

The activity service returns the follow array :

["4x4","rapel"]

When a scrollbar is not necessary the padding/spacing is not correct.

Bad:

Good:

How to use it in codepen?

hello, I want to make some demos with vue-multi-select,but I dont know how to relize it.
I can not find a url or cdn.
Do you any idea ?

Hello, I need to fire the close event manually (in particular, when keyboard Enter button is pushed). How can I manually calls this event from a method?

Thanks a lot in advance!

Without selecting an entry everything is fine:

With a single entry selected no label is displayed:

Codesandbox with sample: https://codesandbox.io/s/6vm2r3r6ww?module=%2Fsrc%2FApp.vue

Seems to be caused by the following line attempting to acces the name attribute when the values are only stored as array.
https://github.com/IneoO/vue-multi-select/blob/master/src/components/vueMultiSelect/vue-multi-select.js#L306

This plugin works like this
<select name="name" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
And stores and send data like the following while submitting the form
[ { "name": "volvo" }, { "name": "opel" }, { "name": "audi" } ]

How do we make it work like this ? Store and send only values of selected items

<select name="name" multiple> Volvo Saab Opel Audi `

[ { "name": "1" }, { "name": "3" }, { "name": "4" } ]

Hi, I'm really enjoying your package.

And I'm trying to use btnLabel's v-html function, but it's not in v4.1's lib.

I needed to build manually inside my node_modules directory.

Would an upgrade be possible?

when importing MultiSelect from 'vue-multi-select'
Vue will state that the component is registered incorrectly, and the component won't mount.

to make it work you need to import the source component
'vue-multi-select/src/components/vueMultiSelect/vue-multi-select'

Hi

If i have:

btnLabel(values) { return ${values.length}; }

It wont show the font awesome icon just plain text.

Hi!
Thks for issue in ipad before. Now, my tester has a bug in Firefox for me.
When I click again an item in list options in Firefox has an error appear: "event is not defined"

Hope you fix it soon! I am looking forward to hearing from you!

I need to use a custom input box at the beginning of the drop-down list, so I have defined the following content for the beforeList slot:

<template slot="beforeList" slot-scope="values">
  <input type="text">
</template>

But when I open the drop-down, I can't enter anything into the text box. I.e. when pressing keys on the keyboard, nothing gets written into the input box.

When I move the input element outside the div with the class multiselect__content-wrapper (wrapper of the ul element with the list of values), it works. But that wouldn't help me in this particular case, since I need the input box to be part of the drop-down.

searchable is set to false.

Package version: latest (3.11.1)

Hi,
How do i customize this vue-multi-select. I want to have the "OK" button in that and when click it, i'll grab the values selected from Values(v-model). AND i need this custom button within the tags with other properties like below

<vue-multi-select
:options="options"
:btnLabel="btnLabel"
:selectOptions="data"
search
historyButton
:filters="filters"
v-model="values"
/ >

To say it simply, need OK button like historyButton

Please help me in this.

<multi-select
class='select-insurance'
@selectionChanged="updateValues"
:options="options"
:selectOptions="insuranceList" />
I have a trouble with function selectionChanged，I want to set some default choosed Items to this list ；
I do that , before creat , I use updateValues(valueArray) to set some default choosed Items, but not as I wish， I got none; in debugger I found the function updateValues will implement after created why? and how can i realize my wish

The Filter / "Select All" button says "Select All" instead of "Deselect All" if starting values all start selected. It needs to be toggled twice to get it to reset.

Hello,
Is it possible to delete the search bar? Or, in the worst case, put the placeholder in French?

Thanks for your help :)

nice package thanks but i got an issue with the search bar, its case sensitive.
Is there a way to remove it ?

Can I display the selected item in the button? In the parameters, you can specify label, but it would be more convenient to display the selected element

why does the disabled dont work？

  <vue-multi-select v-model="test.defaultValues" search history-button :options="options" :filters="filters" :btn-label="btnLabel" :select-options="data" :disabled="true"></vue-multi-select>

my demo

Hello ?
I am trying to use this component on Vue-cli project.
I wanna to set the initial values to this.
So I set them to the v-model, however it does not work.
Could you help me?
How can I solve this issue?
Thanks,
Best regard.

There seem to be styling issues with Firefox. I'm using version 59.0.1

(BTW - this is a great component. Exactly what I was looking for).

I wanna customize format of selected field and list field.
Can I use some options to apply template customized format with data value?
For example that I think(below),

selected field...

selectedFieldTemplate: function(dataItem){
    return dataItem.value + '(count: ' + dataItem.count + ')';
}

list item field...
In case of multi-select, I want to add checkbox in each item field.

listItemTemplate: function(dataItem){
    return '<input type="checkbox"/>' + dataItem.lable + '~' + dataItem.value;
}

I made new component using your library, thanks.
But I found a problem.

After the first multi selection (at least two),
when v-model’s value is update or change,
all values are pushed into Options(Param)

ex)

<MultiSelect
    v-model="values"
    :btnLabel="btnLabel"
    :options="options"
    :selectedOptions="selectOptions"
>
<template v-for="(item, index) in values">
   {{ item.content }} <button @click="values.splice(index, 1)">
</button>
</template>

</MultiSelect>

values : [
{
    content: 'a',
    id: '21'
}, 
{
    content: 'b',
    id: '31'
},
{
    content: 'c',
    id: '11'
},
{
    content: 'd',
    id: '17'
},
]

Every time I press the delete button, all values ​​in selectOptions are pushed.
This seems to be a bug. please check.

So as the title says.
This is my multi select.

<multi-select
     v-model="selectedArr"
     :selectOptions="cars"
     :btnLabel="btnLabel"
     @change="loadModels()"
     :eventName="'change'"
     class="custom-select-box"
 />

and then this is the loadModels() function which is being called on change.

loadModels() {
    this.loading = true;
    console.log('event fired');
    this.selected = this.selectedArr[0].id;
    store.dispatch(FETCH_MODELS, this.listConfig).then(() => this.loading = false);
}

Everytime I change the selected option I can see in the console, that event fired has been logged twice and also that there are two ajax calls being made via store dispatch. This latter one causes a lot of issues for me because of the following.
First there is a dispatch action which is called with the old value(ie. the value which was selected) and then there is a dispatch with the value which is selected now.

edit: was on v 3.12, updated to 3.14 now, but the behavior is the same

hello, when I set the default selected values as array of objects, it doesn't work and select all options!
https://codepen.io/amirmoh/pen/XWKrYmQ