Some fixes and additions

frontend/src/components/SimpleTabs.vue

@@ -1,56 +1,63 @@
 <template>
-    <div class="simple-tabs">
-      <button
-        v-for="tab in tabs"
-        :key="tab.value"
-        :class="['simple-tab', { active: internalValue === tab.value }]"
-        @click="$emit('update:modelValue', tab.value)"
-      >
-        <slot name="label" :tab="tab">
-          {{ $t(tab.label) }}
-        </slot>
-      </button>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'SimpleTabs',
-    props: {
-      tabs: {
-        type: Array,
-        required: true,
-      },
-      modelValue: {
-        type: [String, Number],
-        required: true,
-      },
+  <div class="simple-tabs">
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      :class="['simple-tab', { active: internalValue === tab.value }]"
+      @click="selectTab(tab.value)"
+    >
+      <slot name="label" :tab="tab">
+        {{ $t(tab.label) }}
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SimpleTabs',
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      internalValue() {
-        return this.modelValue;
-      }
+    modelValue: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  computed: {
+    internalValue() {
+      return this.modelValue;
+    }
+  },
+  methods: {
+    selectTab(value) {
+      // 1) v-model aktualisieren
+      this.$emit('update:modelValue', value);
+      // 2) zusätzliches change-Event
+      this.$emit('change', value);
     }
-  };
-  </script>
-  
-  <style scoped>
-  .simple-tabs {
-    display: flex;
-    margin-top: 1rem;
   }
-  
-  .simple-tab {
-    padding: 0.5rem 1rem;
-    background: #fff;
-    border: none;
-    cursor: pointer;
-    transition: background 0.2s;
-  }
-  
-  .simple-tab.active {
-    background: #F9A22C;
-    color: #000;
-  }
-  </style>
-  
+};
+</script>
+
+<style scoped>
+.simple-tabs {
+  display: flex;
+  margin-top: 1rem;
+}
+
+.simple-tab {
+  padding: 0.5rem 1rem;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.simple-tab.active {
+  background: #F9A22C;
+  color: #000;
+}
+</style>