toRefsに変更

miyaoka · Oct 4, 2024 · 70b68be · 70b68be
1 parent 8d1de30
commit 70b68be
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/streams/LiverEventCard.vue b/src/components/streams/LiverEventCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRaw, toRef } from "vue";
+import { computed, toRaw, toRefs } from "vue";
 import { useLiverEvent } from "./useLiverEvent";
 import type { LiverEvent } from "@/services/api";
 import { getThumnail } from "@/lib/youtube";
@@ -12,11 +12,11 @@ const props = defineProps<{
   liverEvent: LiverEvent;
 }>();
 
+const { liverEvent } = toRefs(props);
+
 const focusStore = useFocusStore();
 const searchStore = useSearchStore();
-const { isFinished, elapsedTime, isNew, hasBookmark, hasNotify } = useLiverEvent(
-  toRef(props.liverEvent),
-);
+const { isFinished, elapsedHour, isNew, hasBookmark, hasNotify } = useLiverEvent(liverEvent);
 
 const timeDisplay = computed(() => {
   const { isLive, startAt } = props.liverEvent;
@@ -96,12 +96,12 @@ function setSearchString(str: string) {
       >
         <i v-if="liverEvent.isLive" class="i-mdi-play-circle size-5" />
         <span>{{ timeDisplay }}</span>
-        <template v-if="elapsedTime">
+        <template v-if="elapsedHour">
           <span class="font-normal">
-            {{ `(${elapsedTime.fixed}h)` }}
+            {{ `(${elapsedHour.fixed}h)` }}
           </span>
           <div class="flex items-center opacity-50">
-            <i v-for="time in elapsedTime.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
+            <i v-for="time in elapsedHour.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
           </div>
         </template>
       </div>