[Vuejs]-How to call api when change value in vue multiselect

by

0👍

You can use the deep watch on the value variable.

watch: {
  'value': {
    handler: function (after, before) {
      this.apiCalc();
    },
    deep: true
  },

},

0👍

Ok, so first, you can use the @input event to recognize when something has been picked, like so:

<multiselect v-model="value" :options="options" @input="doApi" multiple></multiselect>

Then in doApi, you can check the current value. 

doApi() {
    console.log(this.value);
}

The value of this.value will be an array of what you have picked. You can pass these to your API. Full codepen here: https://codepen.io/cfjedimaster/pen/gOOjjrb?editors=1111

0👍

Have you tried to use the @select event? Vue Multiselect’s documentation includes several events you can try, check it out here: https://vue-multiselect.js.org/#sub-events

So try 

<multiselect v-model="value" :options="options" @select="actionToExecute" multiple></multiselect>

And then define that in your methods. I’m currently using vue multiselect too so let me know if that works for you.

Leave a comment