vue.jsvuejs2vue-componentvue-events

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


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..


Solution

  • @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"