Fix another input event handler

client/src/components/page-form/PageFormInput.vue

@@ -11,44 +11,36 @@
       :data-cy="cyId"
       :is="type"
       :id="id"
-      @input="$emit('input', $event.target.value)"
+      @input="input"
     />
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-    },
-    type: {
-      type: String,
-      default: 'input',
-    },
-    value: {
-      type: String,
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue';
 
-  data() {
-    return {
-      id: null,
-    };
-  },
+interface Props {
+  label: string;
+  type: string;
+  value: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'input',
+});
+const emit = defineEmits(['input']);
+const classes = computed(() => {
+  return `page-form-input__${props.type} skillbox-${props.type}`;
+});
+const cyId = computed(() => {
+  return `page-form-input-${props.label.toLowerCase()}`;
+});
 
-  computed: {
-    classes() {
-      return `page-form-input__${this.type} skillbox-${this.type}`;
-    },
-    cyId() {
-      return `page-form-input-${this.label.toLowerCase()}`;
-    },
-  },
+const id = '3'; //todo: make unique id
 
-  created() {
-    this.id = this._uid;
-  },
+const input = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value;
+  console.log(value);
+  emit('input', value);
 };
 </script>
 

client/src/components/rooms/RoomForm.vue

@@ -7,7 +7,7 @@
     <page-form-input
       label="Titel"
       :value="localRoom.title"
-      @input="localRoom.title = $event"
+      @input="updateTitle"
     />
 
     <page-form-input
@@ -76,6 +76,9 @@ export default {
       this.localRoom.appearance = newColor;
       this.$store.dispatch('setSpecialContainerClass', newColor);
     },
+    updateTitle(title) {
+      this.localRoom.title = title;
+    },
   },
 
   apollo: {

client/src/router/room.routes.ts

@@ -24,9 +24,26 @@ export default [
   { path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: { filter: true, hideFooter: true, matomoUrl: '/room/' } },
   { path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom },
   { path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true },
-  { path: '/room/:slug', name: ROOM_PAGE, component: room, props: true, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
-  { path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
-  { path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
+  {
+    path: '/room/:slug',
+    name: ROOM_PAGE,
+    component: room,
+    props: true,
+    meta: { matomoUrlCallback: matomoRoomWithSlugCallback },
+  },
+  {
+    path: '/room/:slug/add',
+    name: ADD_ROOM_ENTRY_PAGE,
+    component: newRoomEntry,
+    props: true,
+    meta: { matomoUrlCallback: matomoRoomWithSlugCallback },
+  },
+  {
+    path: '/room/:slug/edit/:entrySlug',
+    name: UPDATE_ROOM_ENTRY_PAGE,
+    component: editRoomEntry,
+    meta: { matomoUrlCallback: matomoRoomWithSlugCallback },
+  },
   {
     path: '/module-room/:slug',
     name: MODULE_ROOM_PAGE,