Есть простенький компонент на Vue. При первой отрисовке все вроде бы нормально, но после перезагрузки страницы приложение ломается, и в консоли появляются ошибки.
Сам компонент:
<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
const props = defineProps(["city"]);
const weather = ref();
onMounted(async () => {
try {
const { data } = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&appid=MY_API_KEYd&units=metric`
); //API ключ скрыт только для вопроса
weather.value = await data;
} catch (error) {
console.error(error);
}
});
console.log("qwe", weather);
</script>
<template>
<div>
<h1>Weather in {{ city }}</h1>
<div>
<p>Temperature: {{ weather.main.temp }}°C</p>
<p>Feels like: {{ weather.main.feels_like }}°C</p>
<p>Description: {{ weather.weather[0].description }}</p>
</div>
</div>
</template>
Ошибки:
Недавно начал изучать Vue и не понимаю в чем проблема? Буду очень рад если кто-то объяснит.