Use cleaner object binding for conditional CSS classes.

krazkidd · Sep 29, 2023 · 6e6e8ec · 6e6e8ec
1 parent e3232e9
commit 6e6e8ec
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/app.vue b/app.vue
@@ -49,7 +49,7 @@ const menuPassThroughOptions = {
       <Menu :model="navMenuItems" :pt="menuPassThroughOptions">
         <template #item="{ label, item, props }">
           <RouterLink :to="item.to!" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
-            <a :href="href" v-bind="props.action" @click="navigate($event).then(() => isSidebarVisible = false)" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
+            <a :href="href" v-bind="props.action" @click="navigate($event).then(() => isSidebarVisible = false)" :class="{ 'router-link-active': isActive, 'router-link-exact-active': isExactActive }">
               <span v-bind="props.icon" />
               <span v-bind="props.label">{{ label }}</span>
             </a>

diff --git a/components/lineup/LineupSpot.vue b/components/lineup/LineupSpot.vue
@@ -29,7 +29,10 @@ onKeyStroke("Backspace", (e) => {
         @blur="focused = false"
         tabindex="0"
     >
-        <LineupDragHandle :class="`${ teamStore.isLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
+        <LineupDragHandle
+            :class="{ hidden: teamStore.isLocked }"
+            class="inline-block shrink-0 text-[1.3em] px-2"
+        />
 
         <LineupJerseyButton
             :spot="props.spot"

diff --git a/pages/lineup/index.vue b/pages/lineup/index.vue
@@ -62,7 +62,7 @@ useSortable(sortableContainer, spots, {
 
         <LineupNewSpot
             @add="!teamStore.isLocked && addSpot(lineup!.spots, $event)"
-            :class="`${ teamStore.isLocked ? 'collapse' : 'visible' }`"
+            :class="{ hidden: teamStore.isLocked }"
             :num-players="spots.length"
         />
     </div>

diff --git a/pages/scoreboard/[[id]].vue b/pages/scoreboard/[[id]].vue
@@ -62,12 +62,8 @@ const fakeTeam = {
 
         <ScoreboardEmojiBoard
             @emote="addEmote({ teamId, emote: $event, ticks: Date.now() } as Emote)"
-            :class="[
-                {
-                    hidden: !route.params.id
-                },
-                'px-4'
-            ]"
+            :class="{ hidden: !route.params.id }"
+            class="px-4"
         />
     </div>
 </template>