如何在Vue.js中触发多选框的change事件

问题根源 #

你使用了Select2插件增强多选框，它会替换原生<select>的DOM结构，导致原生change事件无法触发，必须监听Select2提供的自定义事件才能捕获选项变化。

步骤1：完善选项的value属性（关键） #

先修改Blade循环代码，给每个<option>添加value（推荐用邀请者ID，方便后续业务处理）：

<select id="invitees_list1" class="form-select" multiple name="multi">
    @foreach ($seatedTable->invitees as $invitee)
         <option value="{{ $invitee['id'] }}">
            {{ $invitee['name'] }}
           </option>
       @endforeach
</select>

步骤2：在Vue中监听Select2的自定义事件 #

在Vue的mounted钩子中，给#invitees_list1绑定Select2的select2:change事件，同步选中值到Vue数据并触发业务逻辑：

mounted() {
    // 初始化其他Select2组件
    $("#name_filter").select2()
    $('#side_filter').select2()
    $('#caller_filter').select2()
    $('#relation_filter').select2()
    $('#invitees_list').select2()
    
    // 初始化目标多选框并绑定事件
    const $inviteesList1 = $('#invitees_list1').select2()
    $inviteesList1.show()
    $("#invitees_list").show()

    // 监听Select2的选项变化事件
    $inviteesList1.on('select2:change', (e) => {
        // 获取选中的ID数组（无选中时为空数组）
        this.selectedInviteeIds = $(e.currentTarget).val() || []
        // 可选：获取选中的选项文本数组
        const selectedNames = $.map(e.currentTarget.selectedOptions, option => option.text)
        
        // 触发自定义业务处理方法
        this.handleInviteeSelection()
    })
},
methods: {
    handleInviteeSelection() {
        // 这里编写你的事件逻辑，比如打印选中值、调用接口等
        console.log('选中的邀请者ID:', this.selectedInviteeIds)
        // 示例：提交选中数据到后端
        // axios.post(this.assignTableRoute, { ids: this.selectedInviteeIds })
        //     .then(res => { /* 处理响应 */ })
        //     .catch(err => { /* 处理错误 */ })
    }
}

额外优化：清理事件监听避免内存泄漏 #

在Vue组件销毁前解绑事件，防止内存泄漏：

beforeDestroy() {
    $('#invitees_list1').off('select2:change')
}

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