Coercing boolean keys to strings to match vue key types

cypress-io · Jun 27, 2022 · c3b0858 · c3b0858
1 parent 43a3390
commit c3b0858
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -26,8 +26,9 @@
             <li class="inline-block">
               <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
               <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <!-- the `key` is used to ensure the role/href attrs are added and removed appropriately from the element. -->
               <a
-                :key="hasLinkToProjects"
+                :key="Boolean(hasLinkToProjects).toString()"
                 class="font-medium"
                 :class="hasLinkToProjects ? 'text-indigo-500 hocus-link-default' :
                   'text-gray-700'"
@@ -52,8 +53,9 @@
             <li class="inline-block">
               <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
               <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <!-- the `key` is used to ensure the role/href attrs are added and removed appropriately from the element. -->
               <a
-                :key="hasLinkToCurrentProject"
+                :key="Boolean(hasLinkToCurrentProject).toString()"
                 class="font-medium"
                 :role="hasLinkToCurrentProject ? undefined : 'link'"
                 :href="hasLinkToCurrentProject ? 'choose-testing-type' : undefined"