我無法從開放的 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>uj5u.com熱心網友回復：
你可以用這個解決你的問題
<v-list-item-group v-if="item">
原因是如果您嘗試在物件為空時對其進行迭代，則會出現錯誤。
同時，你template是同步的，所以你只需要告訴它一些東西可能是空的，它不需要驚慌失措。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348570.html