vuejs和api数据gouv用于自动完成地址

Lamri Djamal |

我正在尝试使用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>

例如:返回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}

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

Lamri Djamal |

我资助的问题只是使用多个

例如:

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

如果您有更好的回应,请回答我,谢谢

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

地址自动完成API

来自分类Dev

在地址自动完成API中合并街道编号和路线

来自分类Dev

从数据库自动完成地址的标准方法是什么?

来自分类Dev

如何通过自动完成谷歌 api 获取街道级地址

来自分类Dev

为什么在Vim和emacs中将clang用于自动完成?

来自分类Dev

为什么在Vim和emacs中将clang用于自动完成?

来自分类Dev

Google Place Api用于获取地点的自动完成建议

来自分类Dev

当将==用于基本值和装箱值时,自动装箱完成还是拆箱完成

来自分类Dev

从REST API自动完成

来自分类Dev

Amadeus城市和机场位置API自动完成系统

来自分类Dev

Google Maps自动完成完整地址

来自分类Dev

Google自动完成跳过完整的地址

来自分类Dev

自动完成适用于示例数据,但无法使用真实数据

来自分类Dev

自动完成搜索,在VueJs中上下按键

来自分类Dev

返回的用于自动完成的数据未在json列表中正确格式化

来自分类Dev

将Google Apps脚本数组应用于HTML表单自动完成数据列表

来自分类Dev

返回的用于自动完成的数据未在json列表中正确格式化

来自分类Dev

jQuery自动完成返回数据

来自分类Dev

使用JSON数据自动完成

来自分类Dev

jQuery自动完成数据

来自分类Dev

适用于textarea和自由文本的Facebook jQuery自动完成插件

来自分类Dev

Youtube建议查询适用于Java / Android的自动完成API

来自分类Dev

jQuery自动完成和烧瓶

来自分类Dev

jQuery自动完成和烧瓶

来自分类Dev

地点自动完成 Api 参数

来自分类Dev

从目录生成字典(用于Lucene自动完成)

来自分类Dev

用于SQL PDO的Netbeans PHP自动完成

来自分类Dev

使用composition api和remote api进行vuetify自动完成功能?

来自分类Dev

API在这里指出我无法存储结果。那么如何将其用于地址验证/完成?

Related 相关文章

  1. 1

    地址自动完成API

  2. 2

    在地址自动完成API中合并街道编号和路线

  3. 3

    从数据库自动完成地址的标准方法是什么?

  4. 4

    如何通过自动完成谷歌 api 获取街道级地址

  5. 5

    为什么在Vim和emacs中将clang用于自动完成?

  6. 6

    为什么在Vim和emacs中将clang用于自动完成?

  7. 7

    Google Place Api用于获取地点的自动完成建议

  8. 8

    当将==用于基本值和装箱值时,自动装箱完成还是拆箱完成

  9. 9

    从REST API自动完成

  10. 10

    Amadeus城市和机场位置API自动完成系统

  11. 11

    Google Maps自动完成完整地址

  12. 12

    Google自动完成跳过完整的地址

  13. 13

    自动完成适用于示例数据,但无法使用真实数据

  14. 14

    自动完成搜索,在VueJs中上下按键

  15. 15

    返回的用于自动完成的数据未在json列表中正确格式化

  16. 16

    将Google Apps脚本数组应用于HTML表单自动完成数据列表

  17. 17

    返回的用于自动完成的数据未在json列表中正确格式化

  18. 18

    jQuery自动完成返回数据

  19. 19

    使用JSON数据自动完成

  20. 20

    jQuery自动完成数据

  21. 21

    适用于textarea和自由文本的Facebook jQuery自动完成插件

  22. 22

    Youtube建议查询适用于Java / Android的自动完成API

  23. 23

    jQuery自动完成和烧瓶

  24. 24

    jQuery自动完成和烧瓶

  25. 25

    地点自动完成 Api 参数

  26. 26

    从目录生成字典(用于Lucene自动完成)

  27. 27

    用于SQL PDO的Netbeans PHP自动完成

  28. 28

    使用composition api和remote api进行vuetify自动完成功能?

  29. 29

    API在这里指出我无法存储结果。那么如何将其用于地址验证/完成?

热门标签

归档