ineoo / vue-multi-select Goto Github PK
View Code? Open in Web Editor NEWThis component gives you a multi/single select with the power of Vuejs components.
License: MIT License
This component gives you a multi/single select with the power of Vuejs components.
License: MIT License
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?
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!!!
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"]
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.
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>
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.