Vue error page not showing up when using class bindings - vue.js

Question

I have an error page that shows up if a city is not found. It has been working perfectly until I decided to make the background dynamic based on the result of the search. Now, the entire app-bg div is gone if the error triggers. Here is the relevant code:
Template
<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>
Script
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 );
}
EDIT:
I changed the binding on the div to <div :class="['app-bg', { nightBg: isNight }]"> and added the isNight method to the computed section, as shown below. this.weatherIcon is returning what I expect, but when I look at the Vue extension on Firefox, it shows isNight: (error during evaluation), and the app-bg disappears.
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; }
}
},
. . .