update

components/ProgressCard.vue

@@ -4,10 +4,10 @@
           <p
           class="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
  
-         {{ props.item?.item.price > 0 ? numberFormat(props.item?.item.price) + 'تومان' : 'رایگان' }}
+         {{ props?.item?.item.price > 0 ? numberFormat(props?.item?.item.price) + 'تومان' : 'رایگان' }}
      
           </p>
-          <NuxtImg style="object-fit: cover;" :src="props.item?.item.image"
+          <NuxtImg style="object-fit: cover;" :src="props?.item?.item.image"
             :placeholder="[30, 20]"
             alt="laravel"
             class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
@@ -20,7 +20,7 @@
         <p @click="change"
             class="cursor-pointer mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
           >
-        {{ props.item?.item.name }}
+        {{ props?.item?.item.name }}
      </p>
 
           <div
@@ -28,7 +28,7 @@
           >
             <div class="flex justify-between w-full mb-[0.417vw]">
               <p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
-              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">{{ Math.floor(props.item.completionPercentage) }} %</p>
+              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">{{ Math.floor(props?.item?.completionPercentage) }} %</p>
             </div>
             <div
             id="progressbar"
@@ -47,7 +47,7 @@
 
 const props = defineProps(['item']);
 
-const activeClass = ref(props.item.completionPercentage);
+const activeClass = ref(props?.item?.completionPercentage);
 const router = useRouter()
 const route = useRoute()
 const change = () =>{