Question

我正在使用VueJS构建气象站应用程序，并试图从OpenWeather API中添加天气预报数据。我可以成功提取数据并将其记录到控制台，但是由于某种原因我无法在模板中显示它。

我正在获取接下来五个小时的数据并将其存储在数组中。此刻，我只是想显示第一个小时。这是我的代码：

<template>
  <section>
    <h1>Forecast</h1>

        <i :class="['owf owf-',iconCode[0]]"></i>
        <p>Temperature {{ currentTemp[0] }}</p>

    </div>
  </section>
</template>

<script>
  export default {
      data: function(){
        return {
          time: [],
          currentTemp: [],
          tempMin: [],
          desc: [],
          iconCode: [],
        }
      },

      methods: {
          getWeather() {
            var apiKey = "<apikey>";
            var location = "<location>";
            var units = "metric";
            var url = "http://api.openweathermap.org/data/2.5/forecast?id=" + location + "&APPID=" + apiKey + "&units=" + units;
            this.$http.get(url).then(response => {
              console.log(response.data.list);
              for(var i = 0; i < 5; i++){
                this.time[i] = response.data.list[i].dt_txt;
                this.currentTemp[i] = response.data.list[i].main.temp;
                this.tempMin[i] = response.data.list[i].main.temp_min;
                this.desc[i] = response.data.list[i].weather[0].description;
                this.iconCode[i] = response.data.list[i].weather[0].icon;
              }
            });
          },
      },

      beforeMount(){
        this.getWeather();
      },
  }
</script>

这成功获取了我想要的数据并填充了变量（已在Vue Dev Tools中验证）。模板成功插入页面，并显示静态文本。但是不会显示数据。有什么作用？

编辑：我应该提到我在后端使用Laravel。我试过在{{}}前面加上@符号，以告诉Blade涉及到JS，但它只显示@而不显示变量。

Answer 1

在getWeather方法中，不能使用array [i] =“ value”。这是因为无法跟踪这种对象突变。

改为使用array.push（“ value”）。

https://vuejs.org/v2/guide/reactivity.html

致谢

Answer 2

如果要this.time [i]，this.currentTemp [i]，...

您之前的循环

login.component.html

Vue数据未显示在DOM

2 个答案: