v-on: изменение не работает для vue-multiselect

Question

Я использую компонент vue-multiselect в своем проекте vue.js, я использую директиву v-on для выполнения функции в событии изменения,

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

У меня есть пример полного кода здесь: https://codesandbox.io/s/yjjon0vzxj

v-on:change работал с <select> компонент, но он перестал работать с Vue-Multiselect! Я пробовал с v-on:click="executeLoader" но это тоже не сработало..

Answer 1

@click не будет вызывать метод executeLoader с Vue Multiselect. Ты можешь использовать @input - который похож на v-on:change, @close, @select как в примере ниже:

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

В вашем случае я бы попробовал @input="executeLoader"

Answer 2

В vue-multiselect, поскольку это компонент, к нему нельзя относиться как к простому <select> элемент.

В компонентах, когда вы ожидаете, что они будут вести себя и "прислушиваются" к событиям щелчка, как и к другим HTML-тегам, вы должны добавить модификатор событий с именем: .native,

Итак, вы можете сделать на любом компоненте:

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

Но это не то, что вы ищете, я думаю. Вы хотите запускать функцию, когда добавляете все больше и больше тегов или, если коротко, когда количество выбранных элементов увеличивается.

для этого vue-multiselect выставляет @input событие, так что вы можете обрабатывать с помощью:

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

А теперь просто позвоните executeLoader и принять аргументы как:

methods: {
  executeLoader(selectedItems) {} 
}