vue-multiselect组件v-on:change事件绑定失效问题求助

我帮你排查了代码里的问题，主要有两个关键调整点：

1. 修复自定义标签插槽的作用域参数错误 #

你当前的自定义标签插槽代码存在语法问题：slot-scope="{ customLabel }"的参数取值不对。vue-multiselect的customLabel插槽传递的作用域对象是当前选项（option），而不是你定义的customLabel函数。你在模板里使用了{{ option.name }}，但option并没有从插槽作用域中获取到，这会导致组件渲染异常，间接影响事件触发逻辑。

修改后的插槽代码：

<template slot="customLabel" slot-scope="{ option }">
  <strong>{{ option.name }}</strong>
</template>

2. 确保事件绑定与函数定义正确 #

vue-multiselect官方文档中，选中项变化时推荐使用@input事件（和Vue的v-model逻辑对齐），不过@change理论上也能生效。另外一定要确认executeLoader函数已经在Vue实例的methods中正确定义。

修改后的完整组件代码：

<multiselect 
  v-model="selected" 
  :options="projects" 
  :searchable="false" 
  :custom-label="customLabel" 
  track-by="name" 
  @change="executeLoader"
>
  <template slot="customLabel" slot-scope="{ option }">
    <strong>{{ option.name }}</strong>
  </template>
</multiselect>

对应的methods定义示例：

methods: {
  executeLoader(selectedItem) {
    console.log('选中项已更新：', selectedItem);
    // 在这里编写你的加载逻辑
  }
}

做完这两处调整后，选择不同选项时executeLoader函数应该就能正常触发了。

内容的提问来源于stack exchange，提问作者Ciasto piekarz