WIP Настроила кнопки на хедере

src/pages/newMedicalCard/TheMedicalCard.vue

@@ -1,12 +1,22 @@
 <template lang="pug">
   .w-full
-    medical-card-header
+    medical-card-header(v-model="currentMenuItem")
+    component(
+      v-if="currentMenuItem",
+      v-bind:is="currentMenuItem",
+    )
 </template>
 
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
+import BasicDataForm from "@/pages/newMedicalCard/components/BasicDataForm.vue";
 export default {
   name: "TheMedicalCard",
-  components: { MedicalCardHeader },
+  components: { MedicalCardHeader, BasicDataForm },
+  data() {
+    return {
+      currentMenuItem: "BasicDataForm",
+    };
+  },
 };
 </script>

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -17,14 +17,14 @@
         size="10px"
         label="Удалить медкарту",
         no-caps,
-        padding="4px"
+        padding="6px"
       )
     .flex.justify-between.mt-22px
       .flex
         .menu-item.px-6.py-10px.cursor-pointer.text-base(
           v-for="item in menuItem",
-          @click="selectItem(item.component)",
+          @click="selectItem(item)",
-          :class="{'menu-item-active': item.component === currentMenuItem}",
+          :class="{'menu-item-active': item.component === modelValue}",
           :key="item.id",
           :id="item.id"
         ) {{item.title}}
@@ -36,19 +36,22 @@
         flat,
         no-caps,
         padding="2px 4px"
+        :style="{height: '32px'}"
       )
 </template>
 
 <script>
+import { v_model } from "@/shared/mixins/v-model";
 export default {
   name: "MedicalCardHeader",
+  mixins: [v_model],
   data() {
     return {
       menuItem: [
         {
           title: "Общая информация",
           id: "basic",
-          component: "Basic",
+          component: "BasicDataForm",
         },
         {
           title: "Журнал посещений",
@@ -71,14 +74,11 @@ export default {
           component: "ContactHistory",
         },
       ],
-      currentMenuItem: "Basic",
     };
   },
   methods: {
-    selectItem(componentName) {
+    selectItem(item) {
-      this.currentMenuItem = this.menuItem.find(
+      this.value = item?.component;
-        (elem) => elem.component === componentName
-      )?.component;
     },
   },
 };
@@ -100,6 +100,8 @@ export default {
 .q-btn
   font-size: 14px !important
   font-weight: 500 !important
+.q-btn :deep(.q-icon)
+  font-size: 16px !important
 .q-btn :deep(.on-left)
   margin-right: 4px !important
 .q-btn :deep(.q-btn-dropdown__arrow)
@@ -111,4 +113,6 @@ export default {
   font-size: 12px
   line-height: 135%
   color: var(--font-grey-color)
+.q-breadcrumbs :deep(.q-breadcrumbs__separator)
+  margin: 10px 0 4px 8px !important
 </style>