1 year ago

Variables not rendering in Vue template

Posted 1 year ago by TimeSocks

I am building a weather station app, and am trying to add forecast data from the OpenWeather API. I can successfully pull down the data and log it to the console, but for some reason I can't display it in the template.

I am grabbing the next five hours of data and storing it in arrays. At the moment I am just trying to display the first hour. Here's my code:


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


  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 => {
              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;


The <h1> and <p> text is rendered but not the data from Vue. What am I doing wrong?

Please sign in or create an account to participate in this conversation.