Changed forecast retrieving to onecall

src/components/City.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
-    <v-card
+    <v-card height="200" width="350" v-if="data !== undefined">
-      height="200"
-      width="350"
-      v-if="data !== undefined"
-    >
       <v-list-item three-line>
         <v-list-item-content>
-          <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{ city.name }}</v-card-title>
+          <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{
-          <v-card-subtitle class="pb-0 px-0">{{ city.country }}</v-card-subtitle>
+            city.name
+          }}</v-card-title>
+          <v-card-subtitle class="pb-0 px-0">{{
+            city.country
+          }}</v-card-subtitle>
           <v-list-item-title class="text-h3 font-weight-thin"
-            >{{ Math.round(data.main.temp) }} °C</v-list-item-title
+            >{{ Math.round(data.current.temp) }} °C</v-list-item-title
           >
           <v-list-item-subtitle>{{
-            data.weather[0].description
+            data.current.weather[0].description
           }}</v-list-item-subtitle>
         </v-list-item-content>
 
@@ -21,7 +21,7 @@
           <v-img
             :src="
               'http://openweathermap.org/img/wn/' +
-              data.weather[0].icon +
+              data.current.weather[0].icon +
               '@2x.png'
             "
             height="75"
@@ -43,15 +43,15 @@ export default class City extends Vue {
   @Prop({ required: true }) private readonly city!: any;
 
   private created() {
-    this.getCurrentData();
+    this.getData();
-    this.getHourForecast();
   }
 
-  private getCurrentData() {
+  private getData() {
     axios
-      .get("https://api.openweathermap.org/data/2.5/weather", {
+      .get("https://api.openweathermap.org/data/2.5/onecall", {
         params: {
-          id: this.city.id,
+          lat: this.city.coord.lat,
+          lon: this.city.coord.lon,
           units: "metric",
           lang: "pl",
           appid: process.env.VUE_APP_OWM_API_KEY,
@@ -65,24 +65,6 @@ export default class City extends Vue {
       });
   }
 
-  private getHourForecast() {
-    axios
-      .get("https://api.openweathermap.org/data/2.5/forecast", {
-        params: {
-          id: this.city.id,
-          units: "metric",
-          lang: "pl",
-          appid: process.env.VUE_APP_OWM_API_KEY,
-        },
-      })
-      .then((res) => {
-        this.$data.forecast = res.data;
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  }
-
   private data() {
     return {
       data: undefined,