Vue.js中v-autocomplete自定义模板下退格键无法删除选中项问题

核心问题原因 #

你的问题源于未分离选中值和输入框文本的绑定逻辑，默认情况下v-model同时承担了选中对象和输入文本的职责，导致选中后输入内容会和选中值叠加，且退格键无法触发选中值的清除。

解决方案步骤 #

• 分离v-model与input-value：用v-model绑定选中的用户对象，input-value单独绑定输入框的文本内容，彻底区分选中状态和输入内容。
• 监听输入事件：输入时自动清空选中项，避免输入文本与选中内容合并。
• 监听退格键：当输入框为空且存在选中项时，通过退格键清空选中值。
• 自定义显示模板：分别配置item（下拉选项）和selection（选中后输入框显示）模板，确保显示格式符合需求。

修改后的核心代码 #

模板部分

<v-autocomplete
  v-model="selectedUser"
  :input-value="inputText"
  @input="handleInput"
  @keydown.backspace="handleBackspace"
  :items="users"
  return-object
  placeholder="输入用户名称"
>
  <!-- 下拉选项模板 -->
  <template v-slot:item="{ item }">
    <span>{{ `${item.firstName}, ${item.lastName}` }}</span>
  </template>
  <!-- 选中后输入框显示模板 -->
  <template v-slot:selection="{ item }">
    <span>{{ `${item.firstName}, ${item.lastName}` }}</span>
  </template>
</v-autocomplete>

脚本部分

export default {
  data() {
    return {
      selectedUser: null,
      inputText: '',
      users: []
    }
  },
  methods: {
    async fetchUsers() {
      // 调用Dummy API获取用户列表，注意修正API返回的属性名
      const response = await fetch('https://dummyapi.io/data/v1/user', {
        headers: { 'app-id': '你的DummyAPI应用ID' }
      })
      const result = await response.json()
      // 转换API返回的属性格式（原返回为first_name/last_name）
      this.users = result.data.map(user => ({
        id: user.id,
        firstName: user.first_name,
        lastName: user.last_name
      }))
    },
    handleInput(val) {
      this.inputText = val
      // 输入内容时自动清空选中项，避免叠加
      if (val.trim()) {
        this.selectedUser = null
      }
    },
    handleBackspace() {
      // 输入框为空且有选中项时，退格清空选中值
      if (!this.inputText && this.selectedUser) {
        this.selectedUser = null
      }
    }
  },
  mounted() {
    this.fetchUsers()
  }
}

关键说明 #

1. 属性名修正：Dummy API返回的用户属性是下划线格式（first_name/last_name），需要转换为驼峰格式，否则无法正确渲染。
2. return-object属性：确保v-model绑定的是完整的用户对象，而非单个字段值。
3. 输入与选中的分离：通过input-value控制输入框文本，v-model控制选中状态，彻底解决输入内容与选中项合并的问题。
4. 退格逻辑：仅当输入框为空且存在选中项时触发清空，符合常规输入习惯。

内容的提问来源于stack exchange，提问作者Sumithra B A