Vuetify中捕获VAutocomplete的Chip关闭事件（含键盘操作）

针对你遇到的点击Chip关闭按钮能触发removeUser，但键盘退格删除选中Chip时无法触发的问题，核心解决思路是通过监听组件的model-value变化来捕获删除操作，具体方案如下：

问题根源分析 #

点击Chip的关闭按钮会触发Vuetify内置的@click:close事件，但键盘退格删除Chip是VAutocomplete内部直接修改model-value的逻辑，不会触发Chip的关闭事件。你之前尝试的@vnode-before-unmount会在组件卸载前触发，此时内部引用已被清理，导致作用域异常；而@keydown.backspace受焦点状态影响，监听不稳定。

可行解决方案：监听model-value变化 #

利用@update:model-value事件（或Vue的watch监听），对比更新前后的数组值，找出被删除的用户，再调用removeUser处理业务逻辑。这种方式不受操作方式影响，无论是点击删除还是键盘删除，只要model-value变化就会触发。

代码示例（组合式API） #

<template>
  <VAutocomplete
    v-model="localModel"
    :items="userList"
    multiple
    chips
    deletable-chips
    @click:close="removeUser"
    @update:model-value="handleModelUpdate"
    :loading="isLoading"
    @input="fetchUserList"
    placeholder="搜索用户"
  />
</template>

<script setup>
import { ref, computed } from 'vue'

// 定义props和emit
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:model-value'])

// 本地绑定model
const localModel = computed({
  get() { return props.modelValue },
  set(val) { emit('update:model-value', val) }
})

const userList = ref([])
const isLoading = ref(false)

// 异步获取用户列表（替换成你的接口请求）
const fetchUserList = async (query) => {
  if (!query) return
  isLoading.value = true
  // 示例请求，实际替换为你的服务器接口
  const res = await fetch(`/api/users?keyword=${query}`)
  userList.value = await res.json()
  isLoading.value = false
}

// 原有的删除用户逻辑
const removeUser = (user) => {
  // 这里添加你的业务处理，比如通知父组件、更新缓存等
  console.log('移除用户：', user)
}

// 处理model更新，捕获删除操作
const handleModelUpdate = (newValue) => {
  // 用唯一标识（比如id）对比，避免对象引用导致的匹配失败
  const deletedUser = props.modelValue.find(u => 
    !newValue.some(nu => nu.id === u.id)
  )
  if (deletedUser) {
    removeUser(deletedUser)
  }
}
</script>

选项式API写法（兼容Vue2/Vuetify2） #

如果使用选项式API，可以通过watch监听modelValue的变化：

export default {
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      userList: [],
      isLoading: false
    }
  },
  watch: {
    modelValue(newVal, oldVal) {
      const deletedUser = oldVal.find(u => 
        !newVal.some(nu => nu.id === u.id)
      )
      if (deletedUser) {
        this.removeUser(deletedUser)
      }
    }
  },
  methods: {
    async fetchUserList(query) {
      if (!query) return
      this.isLoading = true
      const res = await fetch(`/api/users?keyword=${query}`)
      this.userList = await res.json()
      this.isLoading = false
    },
    removeUser(user) {
      console.log('移除用户：', user)
      // 业务逻辑处理
    }
  }
}

关键注意事项 #

1. 使用唯一标识对比用户：不要直接比较对象引用，因为异步获取的用户对象可能是新的引用，用id等唯一字段对比更可靠。
2. 兼容所有删除场景：无论是点击Chip关闭按钮、键盘退格删除，还是通过代码修改model-value，该方案都能捕获到删除操作。

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