seperate method for loading stations

src/App.vue

@@ -49,12 +49,17 @@ export default {
 		tableData: undefined,
 	}),
 	mounted() {
+		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>
 

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">