v-on:change 不适用于 vue-multiselect

Question

我在我的 vue.js 项目中使用 vue-multiselect 组件，我使用 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 用vue multiselect 不会触发方法executeLoader。您可以使用 @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> 元素。

在组件中，当您希望它们的行为和 "listen" 像其他 html 标记一样单击事件时，您应该添加一个名为的事件修饰符：.native.

所以，你可以在任何组件上做：

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

但我认为这不是您要找的。 You want to trigger a function when you add more and more tags, or in short: when the selected items increase.

为此，vue-multiselect 公开了 @input 事件，因此您可以使用：

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

现在只需调用 executeLoader 并接受以下参数：

methods: {
  executeLoader(selectedItems) {} 
}

v-on:change 不适用于 vue-multiselect

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

vue.js

vuejs2

vue-component

vue-events