无法在 nuxtjs api 调用中读取未定义的属性（读取“天气”）答案

【问题标题】：Cannot read properties of undefined (reading 'weather') in nuxtjs api call无法在 nuxtjs api 调用中读取未定义的属性（读取“天气”）
【发布时间】：2021-12-17 20:56:41
【问题描述】：

我无法从开放的 Weather API 获得结果，我收到此错误：无法读取未定义的属性（读取“天气”），但是当我将 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>

【问题讨论】：

我认为您需要使用 create() 而不是方法
@danihazler OP 在click 上使用了一种方法，所以完全没问题。如果你使用 Nuxt，你最好使用 asyncData() 或 fetch() 钩子。
您是仅为示例加载了 Vue CDN，还是实际上在您的 nuxt 应用程序中加载了它？您可以查看此答案以查看有关如何在 Vue/Nuxt 中编写简单获取组件的示例：stackoverflow.com/a/67490633/8816585 另外，请阅读此答案，它可能有用：nuxtjs.org/docs/features/data-fetching

标签： vue.js axios nuxt.js

【解决方案1】：

您应该使用最佳实践来使用 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>

【讨论】：

【解决方案2】：

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

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

原因是，如果您尝试在对象为空时对其进行迭代，则会收到错误消息。
同时，你的template 是同步的，所以你只需要告诉它那里有些东西可以是空的，它不需要吓坏。

【讨论】：