vue-select多选遇option:selecting事件未声明报错求助

云上老周

2026-11-1

报错核心原因

该报错是Vue3运行时组件事件规范校验触发，根源是vue-select v4版本的已知问题：组件内部会触发option:selecting这类带冒号命名的自定义事件，但未在自身的emits配置中声明，因此被Vue校验逻辑判定为违规。和当前已实现的json数据读取、页面渲染逻辑无关联。

具体解决步骤

修正多选模式的绑定初始值
多选场景下v-model绑定值必须为数组类型，当前代码中Selected初始值为空字符串，会导致组件内部状态异常，连带触发事件校验报错，修改data配置：
```
data(){
  return {
    openCard: false,
    // 替换原有空字符串的初始值
    Selected: []
  }
}
```

过滤非必要的事件校验警告
如果不需要自定义监听option:selecting事件，可在项目入口文件（通常为main.js）添加全局警告处理逻辑，过滤vue-select抛出的误判警告：

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// 过滤指定的事件校验警告
app.config.warnHandler = (message) => {
  if (message.includes('option:selecting')) return
}

app.mount('#app')

自定义监听事件的适配
如果需要手动处理option:selecting的事件回调，不要直接在模板上用@option:selecting="handleSelect"绑定，先在当前业务组件的配置中提前声明该事件，绕过校验逻辑：
```
export default {
  // 提前声明要使用的自定义事件
  emits: ['option:selecting'],
  // 原有data、computed、methods配置保持不变
  data(){/* ... */},
  computed:{/* ... */},
  methods:{/* ... */}
}
```
tabulator兼容排查说明
从提供的代码逻辑看，目前尚未编写和tabulator交互的相关代码，报错触发时机为操作vue-select选项，暂不需要优先调整tabulator配置。如果后续接入tabulator渲染逻辑后出现同类事件报错，按照相同的方式在对应组件的emits中声明事件，或添加对应警告过滤即可。