本文详解在 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"
@click:close="removeUser(item.raw)" <!-- 此处为唯一正确写法 -->
/>
</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 事件或处理作用域陷阱。这是官方推荐且经过验证的最佳实践。
