fix: undefined error on reload

Author: qwerzl

components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue

@@ -217,23 +217,23 @@ async function handleSubmit(e: any) {
                   <SelectValue placeholder="选择你的社团" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectGroup v-if="clubs?.president.length">
-                    <SelectItem v-for="club in clubs.president" :key="club.id" :value="club.id">
+                  <SelectGroup v-if="clubs?.president && clubs?.president.length">
+                    <SelectItem v-for="club in clubs?.president" :key="club.id" :value="club.id">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">
                         社长
                       </span>
                     </SelectItem>
                   </SelectGroup>
-                  <SelectGroup v-if="clubs?.vice.length">
+                  <SelectGroup v-if="clubs?.vice && clubs?.vice.length">
                     <SelectItem v-for="club in clubs?.vice" :key="club.id" :value="club.id">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">
                         副社
                       </span>
                     </SelectItem>
                   </SelectGroup>
-                  <SelectGroup v-if="clubs?.member.length">
+                  <SelectGroup v-if="clubs?.member && clubs?.member.length">
                     <SelectItem v-for="club in clubs?.member" :key="club.id" :value="club.id">
                       {{ club.name.zh }}
                       <span class="inline-block text-gray-500">

components/custom/sidebar.vue

@@ -7,14 +7,12 @@ const route = useRoute()
 
 const isPresidentOrVicePresident = ref(false)
 
-const { data } = await useAsyncData<AllClubs>('classroomStatuses', () => {
-  return $fetch<AllClubs>(`/api/user/all_clubs`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
+const { data } = await useFetch<AllClubs>(`/api/user/all_clubs`, {
+  headers: useRequestHeaders(),
+  method: 'GET',
 })
 
-if (data.value?.president.length !== 0 || data.value?.vice.length !== 0) {
+if (data.value && (data.value?.president.length !== 0 || data.value?.vice.length !== 0)) {
   isPresidentOrVicePresident.value = true
 }
 </script>