Vue.js，如何通过函数获取嵌套 json 文件的经纬度列表？

Question

如果我使用 getcoords() ，returns 始终只是我所有数组长度的第一个纬度和经度。

如果我使用正常语法 {{fire.latitude}}，{{fire.longitude}} returns 所有纬度和经度。

不知道为什么，可能是很简单的事情

这是第一个写的问题，希望大家清楚。感谢大家的帮助。

<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>

Answer 1

我想你要找的是这个：

<div v-for="(fire, index) in fires" :key="index">
  {{index}}.{{getCoords(index)}}
</div>


getCoords(index) {
    return [this.fires[index].lat, this.fires[index].lon]  
}

Vue.js，如何通过函数获取嵌套 json 文件的经纬度列表？

Vue.js, How to get a list of latitude and longitude of a nested json file troughouth a function?

list

vue.js

axios

maps

coords