2. Zwischenstand

frontend/pages/roles/[mode]/[[id]].vue

@@ -8,13 +8,15 @@ defineShortcuts({
     router.push("/roles")
   },
   'arrowleft': () => {
-    if(openTab.value > 0){
-      openTab.value -= 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex > 0){
+      openTab.value = String(currentIndex - 1)
     }
   },
   'arrowright': () => {
-    if(openTab.value < 3) {
-      openTab.value += 1
+    const currentIndex = Number(openTab.value)
+    if(currentIndex < 3) {
+      openTab.value = String(currentIndex + 1)
     }
   },
 })
@@ -32,7 +34,7 @@ const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
     rights: []
 })
-const openTab = ref(0)
+const openTab = ref("0")
 
 //Functions
 const setupPage = async () => {
@@ -120,7 +122,7 @@ setupPage()
     class="p-5"
     v-model="openTab"
   >
-    <template #item="{item}">
+    <template #content="{item}">
       <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
         <div class="w-1/2 mr-5">
           <UCard>
@@ -157,15 +159,15 @@ setupPage()
       v-else-if="mode == 'edit' || mode == 'create'"
       class="p-5"
   >
-    <UFormGroup
+    <UFormField
         label="Name:"
     >
       <UInput
           v-model="itemInfo.name"
           autofocus
       />
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Rechte:"
     >
       <USelectMenu
@@ -176,14 +178,14 @@ setupPage()
           multiple
       >
       </USelectMenu>
-    </UFormGroup>
-    <UFormGroup
+    </UFormField>
+    <UFormField
         label="Beschreibung:"
     >
       <UTextarea
           v-model="itemInfo.description"
       />
-    </UFormGroup>
+    </UFormField>
   </UForm>
 </template>