Vue2+Vuetify中v-autocomplete不显示输入且仅传单字符搜索问题

问题1：输入框输入的文本不显示 #

原因 #

• v-model绑定的是对象类型的adresse，加上return-object属性后，组件默认把输入框显示和选中对象的文本绑定。但你写的watch里有个无效判断：val !== this.adresse，val是输入的字符串，this.adresse是对象，这俩永远不相等，导致每次输入都触发API请求，干扰了组件正常的输入状态。
• cache-items和no-filter组合可能禁用了组件内部的输入反馈逻辑，让输入文本没法正常显示。

修复步骤 #

1. 修正watch里的判断逻辑，改成对比输入文本和选中地址的文本：

watch: {
  search(val) {
    const selectedAddressText = this.adresse ? `${this.adresse.name1} ${this.adresse.name2}` : '';
    // 只有输入非空，且和当前选中地址的文本不一样时才发请求
    if (val && val !== selectedAddressText) {
      const katApiAdr = `${this.$apiBaseURL}/general/address/${val}`;
      this.fetchAdrDebounced(katApiAdr);
    }
  },
},

2. 先把cache-items和no-filter删掉，看看输入显示能不能恢复。如果之后需要缓存功能，自己手动实现，别用组件自带的，避免冲突。

问题2：API请求只带最后一个字符当参数 #

原因 #

• _timerId没在data里声明，属于组件实例的“野属性”，快速输入时可能清不掉旧的定时器，导致旧请求跑出来；
• 另外你每次请求成功后用push加数据，没清空旧数组，可能导致组件状态乱掉，但核心问题是防抖逻辑里的闭包捕获了旧的url值。

修复步骤 #

1. 在data里加上_timerId的声明，让组件能正确跟踪它：

data: () => ({
  adresse: null,
  katItemsAdr: [],
  search: null,
  _timerId: null // 新增定时器ID
}),

2. 请求成功后先清空旧的katItemsAdr数组，再塞新数据：

.then((katRes) => {
  if (katRes.status === 200) {
    this.katItemsAdr = []; // 清空旧结果
    katRes.data.forEach(item => this.katItemsAdr.push(item));
    console.log(url);
  }
})

3. 优化防抖逻辑，直接传val而不是拼接好的url，避免闭包抓旧值：

// 修改watch
watch: {
  search(val) {
    const selectedAddressText = this.adresse ? `${this.adresse.name1} ${this.adresse.name2}` : '';
    if (val && val !== selectedAddressText) {
      this.fetchAdrDebounced(val);
    }
  },
},
// 修改fetchAdrDebounced方法
methods: {
  fetchAdrDebounced(val) {
    clearTimeout(this._timerId);
    this._timerId = setTimeout(() => {
      const katApiAdr = `${this.$apiBaseURL}/general/address/${val}`;
      this.$axios
        .get(katApiAdr)
        .then((katRes) => {
          if (katRes.status === 200) {
            this.katItemsAdr = katRes.data; // 直接替换数组，代码更简洁
            console.log(katApiAdr);
          }
        })
        .catch(error => console.error(`error msg katApiAdr: ${error}`));
    }, 500);
  },
}

这样改完，防抖逻辑会用最新的输入文本发请求，定时器也能被正确管理，只会执行最后一次输入对应的请求。

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