T7493 - dropdown rol terug op inschrijvingsformulier

Author: Koen De Voegt

src/components/aanvraag/Contacten.vue

@@ -142,6 +142,7 @@
 
 <script>
 import BaseInput from "@/components/input/BaseInput";
+import BaseDropdown from "@/components/input/BaseDropdown";
 import { onUpdated } from "@vue/runtime-core";
 import { reactive, toRefs } from "@vue/reactivity";
 import BaseCheckbox from "@/components/input/BaseCheckbox";
@@ -167,6 +168,7 @@ export default {
   components: {
     BaseCheckbox,
     BaseInput,
+    BaseDropdown,
     AdresVelden,
     BaseInputTelefoon,
   },
@@ -210,7 +212,7 @@ export default {
           label: "Voogd",
         },
         {
-          value: "Opvoedingsverantwoordelijke",
+          value: "opvoedingsverantwoordelijke",
           label: "Opvoedingsverantwoordelijke",
         },
       ],

src/components/input/BaseCheckbox.vue

@@ -15,7 +15,7 @@
           :modelValue="value"
           :disabled="disabled"
           :binary="multiple"
-          @change="check"
+          @update:modelValue="check"
         />
         <span class="help-button-wrapper">
           <a :href="helpLink" target="_blank"
@@ -81,7 +81,8 @@ export default {
     },
   },
   methods: {
-    check() {
+    check(newValue) {
+      this.$emit("update:modelValue", newValue);
       this.$emit("check");
       this.$emit("changeValue");
     },

src/components/input/BaseCheckboxLeft.vue

@@ -8,7 +8,7 @@
           :modelValue="value"
           :disabled="disabled"
           :binary="multiple"
-          @change="check"
+          @update:modelValue="check"
         />
         <span class="help-button-wrapper">
           <i
@@ -66,7 +66,8 @@ export default {
     },
   },
   methods: {
-    check() {
+    check(newValue) {
+      this.$emit("update:modelValue", newValue);
       this.$emit("check");
       this.$emit("changeValue");
     },

src/components/input/BaseCheckboxLeftFunctieSelect.vue

@@ -7,7 +7,7 @@
           :modelValue="value"
           :disabled="disabled"
           :binary="multiple"
-          @change="check"
+          @update:modelValue="check"
         />
       </div>
       <div class="flex-1 mt-1">
@@ -67,7 +67,8 @@ export default {
     },
   },
   methods: {
-    check() {
+    check(newValue) {
+      this.$emit("update:modelValue", newValue);
       this.$emit("check");
       this.$emit("changeValue");
     },

src/components/lid/Contacten.vue

@@ -211,7 +211,7 @@ export default {
           label: "Voogd",
         },
         {
-          value: "Opvoedingsverantwoordelijke",
+          value: "opvoedingsverantwoordelijke",
           label: "Opvoedingsverantwoordelijke",
         },
       ],

src/utils/modelWrapper.js

@@ -3,6 +3,6 @@ import { computed } from "vue";
 export function useModelWrapper(props, emit, name = "modelValue") {
   return computed({
     get: () => props[name],
-    set: (value) => emit("update:${name}", value),
+    set: (value) => emit(`update:${name}`, value),
   });
 }