diff --git a/assets/components/filters/channel-filter.vue b/assets/components/filters/channel-filter.vue
index 52721387..e813c0b8 100644
--- a/assets/components/filters/channel-filter.vue
+++ b/assets/components/filters/channel-filter.vue
@@ -4,9 +4,9 @@
 			<Icon icon="antenna" />
 
 			<div
-				v-if="selectedChannels.length + selectedNetworks.length > 0"
+				v-if="selectedLength > 0"
 				class="filter-applied"
-			>{{ selectedChannels.length + selectedNetworks.length }} {{ selectedChannels.length + selectedNetworks.length > 1 ? 'channels' : 'channel' }}</div>
+			>{{ selectedLength }} {{ selectedLength > 1 ? 'channels' : 'channel' }}</div>
 
 			<div
 				v-else
@@ -18,7 +18,7 @@
 			<router-link
 				class="filter-clear"
 				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-				:class="{ active: selectedChannels.length > 0 }"
+				:class="{ active: selectedLength > 0 }"
 			>clear all<Icon icon="cross2" /></router-link>
 
 			<ul class="filter-items nolist">
@@ -126,6 +126,10 @@ function channelsPerNetwork() {
 	return Object.values(networks).reduce((acc, network) => [...acc, network, ...(network.children || [])], []);
 }
 
+function selectedLength() {
+	return this.selectedChannels.length + this.selectedNetworks.length;
+}
+
 export default {
 	props: {
 		filter: {
@@ -145,6 +149,7 @@ export default {
 		channelsPerNetwork,
 		selectedChannels,
 		selectedNetworks,
+		selectedLength,
 	},
 	methods: {
 		getNewRange,