Блог

У меня есть страница с ошибкой, которая отображается, если город не найден. Он работал отлично, пока я не решил сделать фон динамическим на основе результатов поиска. Теперь весь app-bg div исчезнет, если возникнет ошибка. Вот соответствующий код:

Шаблон

 <div
  :class="{ nightBg: isNight(weather.weather[0].icon) }"
  class="app-bg"
>
  <div v-if="error">
    <router-link to="/">
      <i class="fa fa-times close-icon"></i>      
    </router-link>
    <div class="handleError">
      <h1>Uh-oh!</h1>
      <img src="../assets/errorIcon.png" alt="Error Icon">
      <h3>
        We couldn't find {{ this.$route.params.city }}
      </h3>
      <p>
        Check your spelling and try again!
      </p>      
    </div>
  </div>
  . . .
</div>
 

Скрипт

 export default {
  name: 'Result',
  data(){
    return {
      error: null,
      weather: null
    }
  },
  created() {
    axios.get(`${this.$route.params.city}`)
      .then(response => {
        this.weather = response.data;
      })
      .catch(error => {
        this.error = error;
      });
  },
  methods: {
    . . .,
    isNight(iconID) {
      if(iconID.slice(2) == 'd') {
        return false;
      } if(iconID.slice(2) == 'n') {
        return true;
      } else { return false; }
    }
  }
}
 

CSS

 .nightBg {
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #7f466e 61%, #fc8a8a 100%);
    background: -webkit-linear-gradient(top,  #000000 0%,#7f466e 61%,#fc8a8a 100%);
    background: linear-gradient(to bottom,  #000000 0%,#7f466e 61%,#fc8a8a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#fc8a8a',GradientType=0 );
}
 

Редактировать:

Я изменил привязку к div на <div :class="['app-bg', { nightBg: isNight }]"> и добавил isNight метод в вычисляемый раздел, как показано ниже. this.weatherIcon возвращает то, что я ожидаю, но когда я смотрю на расширение Vue в Firefox, оно появляется isNight: (error during evaluation) и app-bg исчезает.

 export default {
  name: 'Result',
  data(){
    return {
      error: null,
      weather: null,
      weatherIcon: null
    }
  },
  created() {
    axios.get(`${this.$route.params.city}`)
      .then(response => {
        this.weather = response.data;
        this.weatherIcon = this.weather.weather[0].icon;
      })
      .catch(error => {
        this.error = error;
      });
  },
  computed: {
    isNight: () => {
      if(this.weatherIcon.slice(2) == 'n') {
        return true;
      } if(this.weatherIcon.slice(2) == 'd') {
        return false;
      } else { return false; }
    }
  },
  . . .