问题描述
如果我使用 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]
}