如何在 Vuetify 中正确捕获 Chip 关闭事件（包括键盘触发场景）-js教程-PHP中文网

如何在 Vuetify 中正确捕获 Chip 关闭事件（包括键盘触发场景）

本文详解如何在 Vuetify VAutocomplete 的 closable-chips 模式下，可靠捕获 Chip 被关闭的事件——不仅支持鼠标点击 ×，还兼容键盘操作（如 Tab + Backspace），解决因作用域丢失或事件未冒泡导致的 removeUser 失效问题。

本文详解如何在 vuetify `vautocomplete` 的 `closable-chips` 模式下，可靠捕获 chip 被关闭的事件——不仅支持鼠标点击 ×，还兼容键盘操作（如 tab + backspace），解决因作用域丢失或事件未冒泡导致的 `removeuser` 失效问题。

在使用 Vuetify 的 VAutocomplete 构建多选用户选择器（如 UserPicker）时，一个常见痛点是：虽然通过可以响应鼠标点击关闭操作，但当用户使用键盘导航（例如聚焦到某个 Chip 后按 Backspace 或 Delete）时，该事件不会被触发，导致业务逻辑（如从选中列表中移除用户、更新状态）中断。

根本原因在于：Vuetify 内部对键盘关闭 Chip 的处理是直接操作 DOM 并更新 v-model，并不会主动派发 @click:close 这类自定义事件；而 @vnode-before-unmount 等生命周期钩子虽能捕获卸载时机，却因执行上下文与组件实例解耦，导致 ref 响应式数据（如 select.value）不可访问或为空。

✅ 正确解法：使用 @click:close.stop（注意是 click:close，不是 click.close）并确保事件修饰符 .stop 存在，以阻止事件冒泡干扰内部逻辑。该语法已在 Vuetify v3.4+ 中正式支持，并被社区验证为唯一稳定覆盖所有关闭途径（鼠标点击 ×、键盘 Backspace/Delete、Tab 导航后回车关闭）的方案。

以下是修正后的关键代码片段（仅展示模板部分优化）：

<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 保持不变 ... --><template v-slot:chip="{ item }"><vchip :text="item.raw.username" click:close.stop>
      />
    </vchip></template></vautocomplete></template>

? 补充说明：

@click:close 是 Vuetify 官方为 closable-chips 提供的语义化事件别名，专用于监听 Chip 关闭动作，无论触发方式；

.stop 修饰符至关重要——它阻止事件向上冒泡至 VAutocomplete 内部的输入事件处理器，避免因重复响应导致状态错乱（如 select 被清空两次）；

不要使用 @keydown.backspace 或 @update:model-value 监听，前者无法精准定位被关闭的 Chip，后者在多选场景下会因批量更新而丢失单个项上下文。

? 最佳实践建议：

在 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);
  }
}