1

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

2
  • 1
    Возможный дубликат вопроса: Почему возникает ошибка: Uncaught TypeError: Cannot read property of undefined or null (reading ***)
    – SwaD
    Commented 5 февр. в 18:10
  • 1
    @SwaD читал данный вопрос, ничего не почерпнул, поскольку там говорится о природе ошибка, как найти, и как избежать, и мне это понятно, мне не понятно почему мой ref() становиться undefined после перезагрузки, хотя по идее должен был снова отправится запрос на api и записать ответ в ref()
    – Salivan
    Commented 5 февр. в 18:21

1 ответ 1

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>
2
  • Странно weather у вас не имеет main и weather ключей. В запросе вы добавляете только ключ value, который не используется. Мне кажется, вы починили последствие, а не причину
    – SwaD
    Commented 5 февр. в 18:41
  • Автор все сделал абсолютно правильно. Commented 5 февр. в 19:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.