From bbedbed31765ffe1258488edc4993532cf1b1ea8 Mon Sep 17 00:00:00 2001
From: Madison Swain-Bowden <bowdenm@spu.edu>
Date: Tue, 28 May 2024 13:42:29 -0700
Subject: [PATCH] Simplify VFilterTab by using $tc filter

---
 .../VHeader/VHeaderMobile/VFilterTab.vue      | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
index 99abc7d3e8e..36f79548d14 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
@@ -1,18 +1,19 @@
 <template>
-  <VTab id="filters" size="medium" class="gap-x-2" :aria-label="ariaLabel">
+  <VTab
+    id="filters"
+    size="medium"
+    class="gap-x-2"
+    :aria-label="$tc('header.filterButton.withCount', appliedFilterCount)"
+  >
     <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />
     <h2 class="label-regular">{{ $t("filters.title") }}</h2>
   </VTab>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from "vue"
-
-import { useI18n } from "~/composables/use-i18n"
-
 import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 import VTab from "~/components/VTabs/VTab.vue"
 
-export default defineComponent({
+export default {
   name: "VFilterTab",
   components: { VFilterIconOrCounter, VTab },
   props: {
@@ -21,12 +22,5 @@ export default defineComponent({
       default: 0,
     },
   },
-  setup(props) {
-    const i18n = useI18n()
-    const ariaLabel = computed(() =>
-      i18n.tc("header.filterButton.withCount", props.appliedFilterCount)
-    )
-    return { ariaLabel }
-  },
-})
+}
 </script>