如何用Vue和Vue Resource修改嵌套的JSON数据

Question

使用 OpenWeatherMap 在 Vue 中做一些非常简单的事情 API。

可以正确呈现所有数据，但我想修改此类数据，但不确定实现此目的的最佳方法是什么。

这是我的代码：

index.pug

section#weather
  ul
    li(v-for='forecast in forecasts')
      p.time Time: {{ times }}
      p.temperature Temperature: {{ temperatures }}º
      p.description Description: {{ forecast.weather[0].description }}
      img.icon(v-bind:src="'https://openweathermap.org/img/w/' + forecast.weather[0].icon + '.png'")

script.js

var weather = new Vue({
el: '#weather',

data: {
    forecasts: [],
    temperatures: [],
    times: []
},

created: function () {
    this.fetchData();
},        

methods: {
    fetchData: function () {
                     this.$http.get('http://api.openweathermap.org/data/2.5/forecast?q=london&units=metric&appid=YOURAPIKEY')
        .then(response => {
            this.forecasts = response.data.list;
            this.temperatures = Math.round(response.data.list[0].main.temp);
            this.times = moment.unix(response.data.list[0].dt);
        })
    }
}
});

这将只呈现第一次时间和温度，但会呈现正确的各种描述和图标。

例如，将 index.pug 中的内容更改为 p.time Time: {{ forecast.dt }} 可以正常工作，但无法修改时间格式。

有关 OpenWeatherMap JSON 格式的更多信息，请点击此处：https://openweathermap.org/forecast5

Answer 1

在解析数据时不应该对 0 索引进行硬编码（并将其设置为 this.temperatures 和 this.times）。相反，由于 forecast 在循环的任何周期都与 forecasts[i] 相同，因此执行：

section#weather
  ul
    li(v-for='forecast in forecasts')
      p.time Time: {{ forecast.dt}}
      p.temperature Temperature: {{ Math.round(forecast.main.temp) }}º
      p.description Description: {{ forecast.weather[0].description }}
      img.icon(v-bind:src="'https://openweathermap.org/img/w/' + forecast.weather[0].icon + '.png'")

你的 fetchData() 变得简单：

fetchData: function () {                    
  this.$http.get('http://api.openweathermap.org/data/2.5/forecast?q=london&units=metric&appid=YOURAPIKEY')
    .then(response => this.forecasts = response.data.list)
}

如何用Vue和Vue Resource修改嵌套的JSON数据

How to modify nested JSON data with Vue and Vue Resource

api

json

vue.js

vue-resource

openweathermap