如何在 Vuetify 中可靠捕获 Chip 关闭事件（包括键盘触发）

本文详解在 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 值始终为最新状态。以下为修复后的关键代码片段（基于你的模板优化）：立即学习“前端免费学习笔记（深入）”； WisPaper 复旦大学研发的AI学术搜索工具，5分钟内筛选1000篇论文