Vue.js集成api-adresse.data.gouv.fr实现地址自动补全仅显示街道名

现有代码有两个会导致功能失效的问题，既不能正常渲染地址补全项，也没法精准展示纯街道名称：

1. Axios请求赋值逻辑错误：把整个Axios响应对象直接赋值给this.adress，没有从响应中取出接口返回的真实业务数据
2. 模板遍历层级错误：直接对整个响应对象做v-for遍历，完全触达不到地址列表对应的子数组

具体代码调整 #

• 先优化Axios请求逻辑，不要手动拼接URL参数，改用参数配置的方式避免特殊字符导致的请求异常；同时直接从返回结构中提取需要的街道字段，减少模板层的冗余处理：

adressf: function(adressc) {
  // 输入为空时清空补全列表，避免残留旧数据干扰
  if (!adressc.trim()) {
    this.adress = []
    return
  }
  this.axios.get("https://api-adresse.data.gouv.fr/search", {
    params: {
      q: adressc,
      type: "housenumber",
      autocomplete: 1
    }
  }).then((response) => {
    // 从返回结构的data.features中提取数据，每个项的street字段就是纯街道名称
    this.adress = response.data.features.map(item => item.properties.street)
  })
}

• 再调整模板的遍历逻辑，此时this.adress已经是纯街道名称组成的数组，直接遍历渲染即可：

<div v-for="(streetName, index) in adress" :key="index">
  <p>{{ streetName }}</p>
</div>

补充说明 #

• 接口返回结构中features[].properties.street字段本身就是剔除了门牌号、邮编、城市信息的纯街道名称，不需要额外做字符串截取处理，比从完整的label字段里手动截取的稳定性高很多
• 如果后续需要用到门牌号、城市、经纬度等其他字段，可以在map映射的时候把整个properties对象存下来，模板里按需取对应字段展示即可，不要把整个FeatureCollection大对象直接丢给渲染层

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