如何解决Vue.js,如何通过函数获取嵌套 json 文件的经纬度列表?
如果我使用 getcoords() ,则始终只返回所有数组长度的第一个纬度和经度。
如果我使用普通语法 {{fire.latitude}},{{fire.longitude}} 返回所有纬度和经度。
我不知道为什么,可能是很简单的事情
这是写的第一个问题,我希望是清楚的。 感谢大家的帮助。
<template>
<div>
<div v-for="(fire,index) in fires" :key="index">
<!-- {{index}}.{{getCoords()}} -->
{{fire.lat}},{{fire.lon}}
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'FiresList',data () {
return {
fires: null,errored: false,}
},mounted () {
axios.get('https://storage.googleapis.com/public.storykube.com/start2impact/fires.json')
.then(response => {
this.fires = response.data.map((coords)=> {
return {lat: coords.latitude,lon: coords.longitude,date: coords.date}
})
console.log(this.fires);
})
.catch(error => {
console.log(error)
this.errored = true
})
},methods: {
getCoords (){
for (var latlon in this.fires){
return [this.fires[latlon].lat,this.fires[latlon].lon]
//OTHERWISE
// for (let i = 0; i <= this.fires.length; i++){
// return [this.fires[i].lat,this.fires[i].lon]
}
}
}
}
</script>
<style scoped>
</style>
解决方法
我认为您正在寻找的是:
<div v-for="(fire,index) in fires" :key="index">
{{index}}.{{getCoords(index)}}
</div>
getCoords(index) {
return [this.fires[index].lat,this.fires[index].lon]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。