V-on:更改不适用于vue-multiselect

Question

我在我的vue.js项目中使用了vue-multiselect组件，我使用v-on指令在change事件上执行一个函数，

<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>元素。

在组件中，当您希望它们像其他html标记一样表现和“监听”单击事件时，您应该添加一个名为：.native的事件修饰符。

因此，您可以对任何组件执行以下操作：

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

但我想这不是你想要的。当您添加越来越多的标签时，或者简而言之:当所选项目增加时，您希望触发一个函数。

为此，vue-multiselect公开了@input事件，因此您可以使用以下命令来处理：

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

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

methods: {
  executeLoader(selectedItems) {} 
}