I have been working on a new project where I am trying to bind a list of data into the DOM using Vue.js. Unfortunately, despite my attempts with v-for, v-list, and v-repeat, I can't seem to get it to work properly. Below you can see both the template code and the script code that I am using.
<div class="weather-info" v-if="weather!=undefined">
<div v-repeat="item in weather">
<div class="location-box">
<div class="location">{{item.day}}
</div>
<!-- <div class="date">{{ todaysDate() }}</div> -->
</div>
<div class="weather-box">
<div class="temp">{{ Math.round(item.temprature) }}°c</div>
<div class="weather">{{Math.round(item.windSpeed)}}</div>
<div class="icon">
<img src="{{iconUrl}}.png"/>
</div>
</div>
</div>
</div>
Below is the script code:
export default {
data() {
return {
url_base: "https://localhost:7197/api/weather/",
weather: undefined,
};
},
methods : {
async fetchWeather(e) {
if (e.key == "Enter") {
let response = await axios.get(`${this.url_base}forecast?city=${this.query}`);
this.setResults(response.data);
}
},
setResults(res) {
console.log(res)
if(res.isSuccessful === true){
this.weather = res.response;
}else{
// error message
}
},
},
};
The JSON I received in res is shown below.