Vuetify v-autocomplete组件清除选择异常问题求助

问题根源在于你没有绑定v-model来同步组件内部状态，仅靠@input获取DOM值的方式无法让组件正确感知选中状态的变化，再加上自定义item点击事件时直接修改了原数据，导致退格时组件误判存在匹配项、自动重新选中。按以下方式修改即可解决：

• 给组件绑定v-model，通过响应式变量直接控制选中值，替代原有的@input取DOM值逻辑
• 不要在item点击事件里直接修改item.value（会污染原数组数据），改为通过v-model的变化来触发相关emit
• 调整事件监听逻辑，确保值变化时同步触发业务所需的回调

修改后的组件代码 #

<v-autocomplete
  v-model="selectedDestino"
  :items="itemsDestino"
  @update:model-value="handleDestinoChange"
  label="Destino..."
  prepend-icon="mdi-map-marker"
>
  <template v-slot:item="{ item, props }">
    <v-list-item v-bind="props"></v-list-item>
  </template>
</v-autocomplete>

对应的脚本逻辑（以Vue3 setup为例） #

import { ref } from 'vue'

// 绑定组件选中值的响应式变量
const selectedDestino = ref('')
// 声明需要触发的父组件事件
const emits = defineEmits(['emitDestino', 'emitirSeleccion'])

// 处理选中值变化的逻辑
const handleDestinoChange = (value) => {
  // 传递当前输入/选中值给父组件
  emits('emitDestino', value)
  
  // 判断是否是选中了预设选项，若是则触发带-D-后缀的事件
  const matchedItem = itemsDestino.value.find(item => item.value === value)
  if (matchedItem) {
    emits('emitirSeleccion', `${value}-D-`)
  }
}

改动说明 #

1. v-model="selectedDestino"让组件内部状态与外部响应式变量完全同步，退格时会直接清空绑定值，不会出现自动重新选中的情况
2. 用@update:model-value监听值变化，这是Vue3中v-model的标准监听方式，比直接监听@input更可靠
3. 移除了item点击事件中修改item.value的操作，改为在值变化时判断是否匹配预设选项，再拼接后缀触发emit，避免污染原数据数组
4. 现在按一次退格就能直接清空输入框与选中状态，完全符合预期逻辑

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