本文详解在 Vuetify VAutocomplete 多选模式下，如何统一捕获 Chip 的关闭行为——无论是点击 × 按钮还是使用 Backspace 键删除，均需触发自定义清理逻辑，避免因事件作用域丢失导致的 v-model 同步异常。
本文详解在 vuetify `vautocomplete` 多选模式下，如何统一捕获 chip 的关闭行为——无论是点击 × 按钮还是使用 backspace 键删除，均需触发自定义清理逻辑，避免因事件作用域丢失导致的 `v-model` 同步异常。
在 Vuetify 的 VAutocomplete 组件中启用 chips + closable-chips 后，用户可通过两种方式移除已选 Chip：
- 点击 Chip 右侧的关闭图标（触发 @click:close）；
- 在输入框聚焦状态下，用方向键选中某 Chip 后按 Backspace（此操作由 Vuetify 内部处理，不直接暴露原生事件）。
初学者常误以为监听 @keydown.backspace 或 @update:model-value 即可捕获所有关闭动作，但实际会遇到两个核心问题：
- @keydown.backspace 仅在输入框聚焦时触发，且无法精准识别「当前被删除的是哪个 Chip」；
- @vnode-before-unmount 虽能触发，但因生命周期钩子执行时机早于响应式系统更新，ref（如 select.value）可能尚未同步，导致状态不一致。
✅ 正确解法：使用 Vuetify 官方支持的 @click:close 事件（注意是 click:close，不是 click.close 或 @click.stop）。该事件由 Vuetify 的 VChip 组件原生派发，同时覆盖鼠标点击和键盘（Backspace/Delete）两种关闭途径，且保证事件回调中 this / 作用域上下文完整，ref 值始终为最新状态。
以下为修复后的关键代码片段（基于你的模板优化）：
<template><vautocomplete ref="input" v-model="select" v-model:search="search" :items="items" label="Seleziona destinatari" chips closable-chips multiple density="compact" hide-no-data hide-details><!-- ... item slot 不变 ... --><!-- ✅ 关键修改：使用 @click:close 替代 @click.stop --><template v-slot:chip="{ item }"><vchip :text="item.raw.username">
/>
</vchip></template></vautocomplete></template>
⚠️ 注意事项：
- 事件名必须严格为 @click:close（冒号分隔，非点号），这是 Vuetify 3 的标准事件命名规范；
- @click.stop 是 Vue 原生修饰符，用于阻止事件冒泡，与 Chip 关闭逻辑无关；
- @click.close（带点号）是无效写法，Vue 会忽略该监听器；
- removeUser 函数无需修改，其内部对 select.value 和 selectSet 的操作将始终基于最新响应式状态执行。
此外，为增强健壮性，建议在 removeUser 中添加防御性检查：
function removeUser(userItem: UserPreview) {
if (!userItem?.username) return; // 防止空值
selectSet.delete(userItem.username);
const index = select.value.findIndex(u => u.username === userItem.username);
if (index !== -1) {
select.value.splice(index, 1);
}
}
总结：Vuetify 的 @click:close 是专为可关闭 Chip 设计的语义化事件，它抽象了交互差异（鼠标/键盘），确保开发者只需关注业务逻辑，无需手动绑定底层 DOM 事件或处理作用域陷阱。这是官方推荐且经过验证的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
