From 610953fc1b47f4e9466fe20e5e80044ffb5d0960 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sat, 17 Oct 2020 12:06:21 +0200
Subject: [PATCH] seperate method for loading stations

---
 src/App.vue                    | 15 ++++++++++-----
 src/components/Table/Table.vue |  6 +++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e42cf6f..3af24a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,11 +49,16 @@ export default {
 		tableData: undefined,
 	}),
 	mounted() {
-		const vm = this
-		this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=20')
-			.done(function(data) {
-				vm.tableData = data
-			})
+		this.loadStations()
+	},
+	methods: {
+		loadStations() {
+			const vm = this
+			this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=20')
+				.done(function(data) {
+					vm.tableData = data
+				})
+		},
 	},
 }
 </script>
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index b649b80..b31f660 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -10,14 +10,14 @@
 			</tr>
 		</thead>
 		<tbody v-if="stationData">
-			<tr v-for="(obj, ind) in stationData" :key="ind">
+			<tr v-for="station in stationData" :key="station">
 				<td>
 					<div class="stationIcon"
-						:style="{ backgroundImage: `url('${ obj.favicon }')` }" />
+						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
 				</td>
 				<td class="filenameColumn">
 					<span class="innernametext">
-						{{ obj.name }}
+						{{ station.name }}
 					</span>
 				</td>
 				<td class="actionColumn">