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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.