无法在 nuxtjs api 调用中读取未定义的属性（读取 'weather'）

Question

我无法从打开的天气 API 中得到结果，我得到这个错误：无法读取未定义的属性（读取 'weather'），但是当我移动 v-list 时错误消失了部分到另一页。

代码如下，如有帮助将不胜感激：

   
<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>

Answer 1

你或许可以用这个解决你的问题

<v-list-item-group v-if="item">

原因是如果你试图在一个对象为空时迭代它，你会得到一个错误。
同时，您的 template 是同步的，所以您只需要告诉它那里有些东西可以是空的，它不需要惊慌失措。

Answer 2

您应该使用最佳实践通过 AXIOS 调用 API 并且您应该观察 Vue.js 中的反应性，有两点可以解决您的问题：

1- 您需要像 item:[] 一样定义一个数据对象或数组，并在您调用它的函数 this.item 中分配您的响应 showWeatherInfo()

2- 你需要在挂载的生命周期中调用你的函数

<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>

无法在 nuxtjs api 调用中读取未定义的属性（读取 'weather'）

Cannot read properties of undefined (reading 'weather') in nuxtjs api call

vue.js

axios

nuxt.js