v-on：更改不适用于 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>

元素。

在组件中，当您希望它们像其他 html 标签一样表现并“监听”单击事件时，您应该添加一个名为：

.native

的事件修饰符。

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

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

但我认为这不是你正在寻找的。您希望在添加越来越多的标签时触发一个函数，或者简而言之：当所选项目增加时触发一个函数。

为此，vue-multiselect 公开了

@input

事件，因此您可以使用以下方式处理：

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

现在只需调用

executeLoader

并接受参数：

methods: {
  executeLoader(selectedItems) {} 
}

Answer 3

如果您在 2024 年阅读本文，您可能正在使用 Vue 3，所以请尝试

      <multiselect
        ...
        @update:model-value="apply"
      />