After experimenting with v-if, I encountered the following error: Uncaught TypeError: Cannot read property '0' of undefined
I have identified the issue to be related to the fact that the code cannot execute without the data being fetched first. However, I am unsure of how to make this happen only when the Enter key is pressed.
If I remove v-if="weather.weather[0].main=='Clouds'" and v-if="weather.weather[0].main=='Clear'", the code functions normally. Yet, all the animations occur simultaneously when I do this.
Below is the code snippet:
<template>
<div id="container" :class="containerTemperature">
<h1>Better<br>Weather</h1>
<main id="app" :class="appTemperature">
<div class="search-box">
<input
type="text"
class="search-bar"
placeholder="Search..."
v-model="query"
@keypress="fetchWeather"
/>
</div>
<CloudsAnimation v-if="weather.weather[0].main=='Clouds'">
</CloudsAnimation>
<SunAnimation v-else-if="weather.weather[0].main=='Clear'">
</SunAnimation>
<NoAnimation v-else>
</NoAnimation>
<div class="weather-wrap" v-if="typeof weather.main != 'undefined'">
<div class="location-box">
<div class="location">{{ weather.name }}, {{ weather.sys.country }}</div>
<div class="date">{{ dateBuilder() }}</div>
</div>
<div class="weather-box">
<div class="temp">{{ Math.round(weather.main.temp) }}°c</div>
<div class="weather">{{ weather.weather[0].main }}</div>
</div>
</div>
</main>
</div>
</template>
<script>
import CloudsAnimation from "./components/CloudsAnimation"
import SunAnimation from "./components/SunAnimation"
import NoAnimation from "./components/NoAnimation"
export default {
name: 'App',
components: {
CloudsAnimation,
SunAnimation,
NoAnimation
},
data () {
return {
api_key: '08f1525958fbc6584f628b6dac25a906',
url_base: 'https://api.openweathermap.org/data/2.5/',
query: '',
weather: {}
}
},
computed: {
containerTemperature: function () {
return {
'warm-container': typeof this.weather.main != 'undefined' && this.weather.main.temp > 20,
'cold-container': typeof this.weather.main != 'undefined' && this.weather.main.temp < 9
}
}, appTemperature: function () {
return {
'warm': typeof this.weather.main != 'undefined' && this.weather.main.temp > 20,
'cold': typeof this.weather.main != 'undefined' && this.weather.main.temp < 9
}
}
},
methods: {
fetchWeather (e) {
if (e.key == "Enter") {
fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
.then(res => {
return res.json();
}).then(this.setResults)
.then(this.query = "");
}
},
setResults (results) {
this.weather = results;
},
dateBuilder () {
let d = new Date();
let months = ["January", "February", "March", "August", "September", "October", "November", "December"];
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day = days[d.getDay()];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${day} ${date} ${month} ${year}`;
}
}
}
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Montserrat', sans-serif;
#container {
position: relative;
display: flex;
...
}
}
}
</style>