v-on:change does not work for vue-multiselect

Question

I am using vue-multiselect component in my vue.js project, I am using v-on directive to execute a function on the change event ,

<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel" slot-scope="{ customLabel }"><strong>{{ option.name }}</strong></template>   
</multiselect>

I have example full code here: https://codesandbox.io/s/yjjon0vzxj

the v-on:change was working with <select> component but it stopped workigng with vue-multiselect ! I tried with v-on:click="executeLoader" but that too didnt worked either..

What would you like to achieve with the `@click` handler? – Omar Tanti Mar 30 '18 at 04:08 — Omar Tanti, Mar 30 '18 at 04:08

score 15 · Accepted Answer · edited Feb 03 '23 at 03:40

15

@click will not trigger the method executeLoader with vue multiselect. You can use @input - which is similar to v-on:change, @close, @select as in example below:

<multiselect placeholder="Pick at least one"
  select-label="Enter doesn’t work here!"
  :value="value"
  :options="options"
  :multiple="true"
  :searchable="true"
  :allow-empty="false"
  :hide-selected="true"
  :max-height="150"
  :max="3"
  :disabled="isDisabled"
  :block-keys="['Tab', 'Enter']"
  @input="onChange"
  @close="onTouch"
  @select="onSelect">
</multiselect>

In your case I would try @input="executeLoader"

edited Feb 03 '23 at 03:40

cjohnson318

3,154
30
33

answered Mar 30 '18 at 04:07

Omar Tanti

1,368
1
14
29

how to send any extra parameter with function "executeLoader" I tried this @input="executeLoader($event)", but its not working. – Pawan Jasoria Sep 14 '18 at 11:42
The `@input` event is emitted with only the value and the id of the component. In order to send extra parameters to `@input` you would need to create a child component and `emit` the extra parameters from child component to the parent component. Here you can see a working example: https://codesandbox.io/s/v06l9z6743 . I hope this can solve your issue – Omar Tanti Sep 18 '18 at 06:18

score 1 · Answer 2 · edited Oct 26 '18 at 05:47

In vue-multiselect, since it is a component you can't treat it to behave like a simple <select> element.

In components, when you expect them to behave and "listen" to click events just like other html tag, then you should add an event modifier called: .native.

So, you can do on any component:

<... @click.native="executeLoader" />

But that is not what you are looking for I think. You want to trigger a function when you add more and more tags, or in short: when the selected items increase.

for that, vue-multiselect exposes the @input event, so you can handle using:

<... @input="executeLoader" />

And now just call executeLoader and accept the arguments as:

methods: {
  executeLoader(selectedItems) {} 
}

v-on:change does not work for vue-multiselect

2 Answers2