Приложение крашит после первой перезагрузки страницы

Question

Есть простенький компонент на 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 и не понимаю в чем проблема? Буду очень рад если кто-то объяснит.

Answer 1

Все оказалось куда проще. Погода отображается на странице до того, как асинхронный вызов для ее установки завершится, поэтому она не определена до тех пор, пока не будет выполнен вызов axios.

Нужно просто добавить условие в обертку:

<template>
  <div v-if="weather">
    <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>

БЛОГ НА HUSL

Приложение крашит после первой перезагрузки страницы

Ответы (1 шт):