No puedo obtener el resultado de la API Weather abierta. Aparece este error: No se pueden leer las propiedades de undefined (leyendo 'weather'), pero el error desaparece cuando muevo la parte de la lista virtual a otra página.
El código está abajo, cualquier ayuda sería apreciada:
<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>Probablemente puedas solucionar tu problema con esto
<v-list-item-group v-if="item"> La razón es que si intenta iterar sobre un objeto cuando está vacío, obtendrá un error.
Mientras tanto, su template es sincrónica, por lo que deberá decirle que algunas cosas pueden estar vacías allí y que no necesita asustarse.
Debe utilizar las mejores prácticas para llamar a la API con AXIOS y debe observar la reactividad en Vue.js que hay dos puntos que resolverán su problema:
1- Debe definir un objeto de datos o una matriz como item:[] y asignar su respuesta en este elemento en su función que llamó this.item showWeatherInfo()
2- Debe llamar a su función en el ciclo de vida montado
<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>