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

在组件中，当您希望它们表现出来并且＆＃34;倾听＆＃34;要像其他html标记一样点击事件，那么你应该添加一个名为.native的事件修饰符。

所以，你可以对任何组件做：

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

但我认为这不是你想要的。您希望在添加越来越多的标签时触发功能，或简而言之：当所选项目增加时。

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

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

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

methods: {
  executeLoader(selectedItems) {} 
}

v-on：更改不适用于vue-multiselect

2 个答案: