vue js 和 api data gouv fr 自动补全地址

Question

我正在尝试使用 api 作为 vue 标签街道的自动完成地址

    adressf : function(adressc) {
    this.axios.get("https://api-adresse.data.gouv.fr/search/q="+adressc+"&type=housenumber&autocomplete=1").then((response) => {
    console.log(adressc);
    this.adress = response
    console.log(this.adress);

  });

然后

<div v-for="(citys,name,index) in adress" :key="index" 
:data-list-id="citys"> <p>{{citys}}</p> </div>

例如：return json

    {"type": "FeatureCollection", "version": "draft", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [7.718956, 48.589886]}, "properties": {"label": "2 Rue J. Mayer 67200 Strasbourg", "score": 0.8733390909090908, "housenumber": "2", "id": "67482_3372_00002", "type": "housenumber", "x": 1047812.51, "y": 6842582.55, "importance": 0.60673, "name": "2 Rue J. Mayer", "postcode": "67200", "citycode": "67482", "city": "Strasbourg", "context": "67, Bas-Rhin, Grand Est", "street": "Rue J. Mayer"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [-4.488747, 48.387481]}, "properties": {"label": "2 Rue J.b. Boussingault 29200 Brest", "score": 0.8701781818181817, "housenumber": "2", "id": "29019_0615_00002", "type": "housenumber", "x": 146407.15, "y": 6835957.91, "importance": 0.57196, "name": "2 Rue J.b. Boussingault", "postcode": "29200", "citycode": "29019", "city": "Brest", "context": "29, Finist\u00e8re, Bretagne", "street": "Rue J.b. Boussingault"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [6.148369, 49.12921]}, "properties": {"label": "2 Rue J.- B. Leprince 57050 Metz", "score": 0.8694181818181818, "housenumber": "2", "id": "57463_3520_00002", "type": "housenumber", "x": 929737.93, "y": 6896737.61, "importance": 0.5636, "name": "2 Rue J.- B. Leprince", "postcode": "57050", "citycode": "57463", "city": "Metz", "context": "57, Moselle, Grand Est", "street": "Rue J.- B. Leprince"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [6.148369, 49.12921]}, "properties": {"label": "2 Rue J.- B. Leprince 57050 Metz", "score": 0.8694181818181818, "housenumber": "2", "id": "57463_3520_00002", "type": "housenumber", "x": 929737.93, "y": 6896737.61, "importance": 0.5636, "name": "2 Rue J.- B. Leprince", "postcode": "57050", "citycode": "57463", "city": "Metz", "context": "57, Moselle, Grand Est", "street": "Rue J.- B. Leprince"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [6.167132, 48.703398]}, "properties": {"label": "2 Rue J. B. Thierry Solet 54000 Nancy", "score": 0.8688745454545453, "housenumber": "2", "id": "54395_2780_00002", "type": "housenumber", "x": 933005.09, "y": 6849479.62, "importance": 0.55762, "name": "2 Rue J. B. Thierry Solet", "postcode": "54000", "citycode": "54395", "city": "Nancy", "context": "54, Meurthe-et-Moselle, Grand Est", "street": "Rue J. B. Thierry Solet"}}], "attribution": "BAN", "licence": "ETALAB-2.0", "query": "2 rue j", "limit": 5}

我的问题我只需要看街道名称

Answer 1

可以通过访问嵌套的 properties 字段按如下方式完成：

<div v-for="(city ,index) in adress" :key="index" :data-list-id="city"> <p>{{city.properties.label}}</p> </div

Answer 2

我的基金发行只用了多个

例如：

<div v-for="(citys,name,index) in adress.features" :key="index" :data-list-id="citys"> <p> {{citys.properties.label}}</p> </div>

如果有更好的回复，请回复我谢谢

vue js 和 api data gouv fr 自动补全地址

vuejs and api data gouv for autocomplete adress

javascript

api

vue.js

autocomplete