I cannot get the result from the open Weather API,I get this error: Cannot read properties of undefined (reading 'weather'), but the error's gone when I move the v-list part to another page.
code is below, any helps would be appreciated :
<template>
<div>
<v-row>
<v-col sm="10" offset-sm="1" lg="8" offset-lg="2">
<h2 class="text-uppercase title text-center my-5">weather forecast</h2>
<v-row justify="center">
<v-btn color="primary" outlined class="mt-7" @click="showWeatherInfo">Show Info</v-btn>
</v-row>
<v-row>
<v-list>
<v-list-item-group>
<v-list-item>Weather: {{item.weather[0].main}}</v-list-item>
<v-list-item> temperature: {{item.main.temp}} ° C. </v-list-item>
<v-list-item> humidity: {{item.main.humidity}} % </v-list-item>
<v-list-item> wind: {{item.wind.speed}}m </v-list-item>
</v-list-item-group>
</v-list>
</v-row>
<v-row justify="center">
<v-btn color="primary" outlined class="mt-7">Go Back</v-btn>
</v-row>
</v-col>
</v-row>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods : {
async showWeatherInfo(){
const item = await this.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=tehran&appid=${process.env.apiKey}`)
console.log(item)
return { item }
}
}
}
</script>You can probably fix your issue with this
<v-list-item-group v-if="item">
The reason is that if you try to iterate on an object when it's empty, you will get an error.
Meanwhile, your template is synchronous so you'll need to just tell it that some stuff can be empty there and that it doesn't need to freak out.
You ought to use best practice to call API with AXIOS and you should observe reactivity in Vue.js that there are two points that will solve your problem:
1- You need to define a data object or Array like item:[] and assign your response in this.item in your function that you called it showWeatherInfo()
2- You need to call your function in the mounted life cycle
<template>
<div>
<v-row>
<v-col sm="10" offset-sm="1" lg="8" offset-lg="2">
<h2 class="text-uppercase title text-center my-5">weather forecast</h2>
<v-row justify="center">
<v-btn color="primary" outlined class="mt-7" @click="showWeatherInfo">Show Info</v-btn>
</v-row>
<v-row>
<v-list>
<v-list-item-group v-if="item">
<v-list-item>Weather: {{item.weather[0].main}}</v-list-item>
<v-list-item> temperature: {{item.main.temp}} ° C. </v-list-item>
<v-list-item> humidity: {{item.main.humidity}} % </v-list-item>
<v-list-item> wind: {{item.wind.speed}}m </v-list-item>
</v-list-item-group>
</v-list>
</v-row>
<v-row justify="center">
<v-btn color="primary" outlined class="mt-7">Go Back</v-btn>
</v-row>
</v-col>
</v-row>
</div>
</template>
<script>
export default{
data(){
return{
item:[]
}
},
methods : {
async showWeatherInfo(){
const response = await this.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=tehran&appid=${process.env.apiKey}`)
this.item = response
}
}
}
</script>