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

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.

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!

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

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!

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

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.

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

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

<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

I want to make .select wide:100%,but is seems not working to me

<template>
  <vue-multi-select
    v-model="values"
    :filters="filters"
    :options="options"
    :selectOptions="data"
    :btnLabel="btnLabel"
    @selectionChanged="getMultiValues"
    btnClass="roleSelect"
  />
</template>

<style lang="scss">
  .roleSelect{
    width: 100%;
  }
</style>

Hi, I am stuck in this situation currently.

I am using receivedData to populate the dropdown. This receivedData is used in two API calls:

• First when page is loaded, the dropdown will be populated.
• Second, in the event handler @selectionChanged when some items are selected, it will make another API request and receive the new values in receivedData variable i.e. the same variable to populate the dropdown again.

Somehow, this is causing the event to trigger continuously making API requests.

When I commented the this.receivedData = res.data; line from FilterBySelectedItem(), then the continuous triggering stopped, means receivedData is not changed this time hence not causing the event to trigger.

Screenshot of event handler code:

Screenshot of on page load method

I was trying to implement this in my Vue app and I was facing this error.

Vue Version: 3

code

`< vue-multi-select v-model="values1" search :options="options1" :selectOptions="data1" />

i want to use select all filter as checkbox not a button is this possible. Please advice

if i click on All button its selecting all options. i need same function for option displaying as all with checkbox

Hi Guys,

I think this feature not available which I am asking for. Actually I want multi select with search and selectall/deselectall options. Here I have 100 items all by default selected and by search I have result of 5 items, when I click on deselect all option it only deselecting 5 items rest of all remains selected when I removed search filter. So, my need is deselect all options even if is not displaying in search result.

Thanks