Почему выдает ошибку Type Error в Vue js?

Question

[Games2and1IT]

Написал приложение для погоды на Vue JS/ Выводит вот такую ошибку:

Примечание: в коде нету тега style, чтобы не загрязнять код здесь. В оригинальном проекте тег присутствует.

<template>
  <div class="wrapper">
    <h1>Погода</h1>
    <p>Узнать погоду в {{ city == "" ? "вашем городе" : cityName }}</p>
    <input type="text" placeholder="Введите город" v-model="city" />
    <button v-if="city != ''" @click="getWeather()">
      <b>Получить погоду</b>
    </button>
    <button v-else="" disabled><b>Введите ваш город</b></button>
    <p class="error">{{ error }}</p>
    <p v-show="info != null">Температура: {{ info.main.temp - 273.15 + 1 }}</p>
    <p v-show="info != null">
      Ощущается как: {{ info.main.feels_like - 273.15 + 1 }}
    </p>
    <p v-show="info != null">
      Минимальная температура: {{ info.main.temp_min - 273.15 + 1 }}
    </p>
    <p v-show="info != null">
      Максимальная температура: {{ info.main.temp_max - 273.15 + 1 }}
    </p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      city: "",
      error: "",
      info: null,
    };
  },

  computed: {
    cityName() {
      return "~" + this.city + "~";
    },
  },

  methods: {
    getWeather() {
      if (this.city.trim().length < 2) {
        this.error = "В названии должно содержаться больше 2 символов :)";
        return false;
      }

      this.error = "";

      axios
        .get(
          `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&units=metrik&appid=3d9de74844d28377e81415151cbe6a66`
        )
        .then((res) => (this.info = res.data));
    },
  },
};
</script>

Несколько раз перезапускал сервер и пытался выяснить в чем проблема. Просто главная проблема, то что вчера код работал. А сегодня нет.

Answer 1

[Антон Антон]

info.main.temp => info?.main?.temp
и так везде в шаблоне.
Ну и лучше v-if использовать вместо v-show, так как v-show не предотвращает рендеринг