Vuetify中v-autocomplete输入框无法输入内容的问题求助

核心问题1：定时器变量名不匹配 #

你的watch监听中错误使用了未定义的searchDelay变量，导致旧的定时器无法被清除，异步请求逻辑混乱，进而阻塞了输入框的响应。

核心问题2：潜在的响应式数据缺失 #

计算属性nonRegisteredSearchUsers中使用了this.users，但你的代码片段里未显示该变量的定义，若this.users不是响应式数据或未初始化，会导致筛选逻辑异常，影响组件状态。

修复步骤： #

1. 修正定时器变量名
   将watch中的this.searchDelay改为this.userSearchDelay，确保旧定时器能被正确清除：

   watch: {
     search2() {
       if (this.userSearchDelay) clearTimeout(this.userSearchDelay)
       this.userSearchDelay = setTimeout(this.getSearchUsers, 300)
     }
   },
   

2. 完善搜索逻辑
   当搜索词为空时，清空用户列表，避免残留数据干扰：

   methods: {
     getSearchUsers() {
       if (!this.search2) {
         this.searchUsers = []
         return
       }
       apiService.getAdminViewUserIndex(this.search2).then(({ data }) => {
         this.searchUsers = data.users
       })
     }
   },
   

3. 确保this.users已正确定义
   在data中初始化users为响应式数组：

   data() {
     return {
       searchUsers: [],
       users: [], // 新增初始化
       selectedUserId: null,
       search2: null,
       userSearchDelay: 0
     }
   },
   

4. 优化item-text的拼接
   给姓名添加空格，提升显示可读性：

   <v-autocomplete 
     v-model="selectedUserId" 
     :items="nonRegisteredSearchUsers" 
     :search-input.sync="search2" 
     hide-no-data 
     hide-selected 
     :item-text="item => `${item.firstName} ${item.lastName}`" 
     item-value="id" 
     label="Users" 
     placeholder="Start typing to search" 
     filled
   ></v-autocomplete>
   

验证效果 #

完成上述修改后，输入框应该可以正常输入，同时300ms延迟后会触发搜索请求，返回符合条件的未注册用户列表。

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