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

Question

如果我使用 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>

标签： listvue.jsaxiosmapscoords

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