如何阻止PrimeVue多选Autocomplete按退格键删除选项？

直接用@keydown事件替代@input即可解决问题，因为input事件触发时组件的删除逻辑已经执行，此时调用preventDefault()根本来不及生效。具体实现如下：

• 给Autocomplete组件绑定@keydown事件处理器
• 在方法中判断退格键、输入框为空且存在已选选项这三个条件，同时调用preventDefault()和stopPropagation()阻止默认行为

示例代码：

<AutoComplete
  v-model="selectedItems"
  :options="options"
  multiple
  @keydown="handleBackspace"
/>

handleBackspace(event) {
  // 只处理退格键
  if (event.key !== 'Backspace') return;

  const inputElement = event.target;
  // 输入框为空且已有选中项时阻止默认删除行为
  if (!inputElement.value && this.selectedItems.length > 0) {
    event.preventDefault();
    event.stopPropagation();
    // 这里可以添加你需要的自定义逻辑，比如提示用户等
  }
}

原理说明：
keydown事件在按键按下的瞬间触发，早于组件内部的删除逻辑执行时机，因此能有效拦截默认行为。而@input事件是在内容变更后才触发，此时组件已经完成了芯片删除操作，preventDefault()自然无效。

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