如何为v-autocomplete组件设置服务端返回的默认显示字符串？

问题根因 #

• 你开启了return-object属性，v-autocomplete要求v-model绑定的selectedPlace必须是locationList中的同源对象引用，如果是结构相同的独立对象、或者在locationList加载完成前就赋值，组件无法匹配到对应item-text，就会显示为空。
• 你直接将v-model绑定为locationList[0]属于强制绑定响应式数组元素，用户修改输入值时会被响应式更新拉回原绑定值，自然无法修改或清空。
• auto-select-first属性的作用是用户输入搜索内容时自动选中下拉框第一个匹配项，不负责初始化默认值，所以达不到你要的效果。

正确实现方案 #

1. 基础变量初始化时不要绑定固定数组元素：

data() {
  return {
    selectedPlace: null,
    locationList: [],
    query: ''
  }
}

2. 在接口请求逻辑中，等地址选项列表locationList加载完成后，再匹配服务端返回的用户地址信息赋值：

async initData() {
  // 先加载地址选项列表
  this.locationList = await requestLocationList()
  // 再加载用户信息
  const userInfo = await requestUserInfo()
  // 从已加载的地址列表中匹配对应地址赋值
  this.selectedPlace = this.locationList.find(item => item.id === userInfo.saveAddressId) || null
}

3. 原有组件代码无需修改，删除之前添加的auto-select-first属性即可。

注意事项 #

• 必须保证locationList赋值完成后再给selectedPlace赋值，顺序颠倒会导致匹配失败显示空值。
• 不要手动构造新对象赋值给selectedPlace，必须使用locationList中存在的对象引用，否则组件无法识别对应显示文本。

内容的提问来源于stack exchange，提问作者Christine H.