Refactor to use defineModel

client/src/components/onboarding/PaymentMethod.vue

@@ -1,23 +1,9 @@
 <script setup lang="ts">
 import { t } from "i18next";
-import { computed } from "vue";
 
-const props = defineProps<{
-  modelValue: {
-    payment_method: string;
-  };
-}>();
-
-const emit = defineEmits(["update:modelValue"]);
-
-const model = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
+const model = defineModel<{
+  payment_method: string;
+}>({ required: true });
 
 const paymentMethods = [
   { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
@@ -42,7 +28,7 @@ const paymentMethods = [
     </div>
   </div>
 
-  <div v-if="props.modelValue.payment_method === 'cembra_byjuno'" class="col-span-full">
+  <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
     <p class="mt-4">
       {{ $t("shop.paymentCembraByjunoMessage") }}
     </p>

client/src/components/onboarding/PersonalAddress.vue

@@ -2,36 +2,22 @@
 import ItDatePicker from "@/components/ui/ItDatePicker.vue";
 import { useEntities } from "@/services/entities";
 import "@vuepic/vue-datepicker/dist/main.css";
-import { computed } from "vue";
 
-const props = defineProps<{
-  modelValue: {
-    first_name: string;
-    last_name: string;
-    street: string;
-    street_number: string;
-    postal_code: string;
-    city: string;
-    country_code: string;
-    payment_method: string;
+const model = defineModel<{
+  first_name: string;
+  last_name: string;
+  street: string;
+  street_number: string;
+  postal_code: string;
+  city: string;
+  country_code: string;
+  payment_method: string;
 
-    phone_number: string;
-    birth_date: string;
-  };
-}>();
-
-const emit = defineEmits(["update:modelValue"]);
+  phone_number: string;
+  birth_date: string;
+}>({ required: true });
 
 const { countries } = useEntities();
-
-const address = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
 </script>
 
 <template>
@@ -43,7 +29,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="first-name"
-          v-model="address.first_name"
+          v-model="model.first_name"
           type="text"
           name="first-name"
           required
@@ -60,7 +46,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="last-name"
-          v-model="address.last_name"
+          v-model="model.last_name"
           type="text"
           name="last-name"
           required
@@ -80,7 +66,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="street-address"
-          v-model="address.street"
+          v-model="model.street"
           type="text"
           required
           name="street-address"
@@ -100,7 +86,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="street-number"
-          v-model="address.street_number"
+          v-model="model.street_number"
           name="street-number"
           type="text"
           autocomplete="street-number"
@@ -119,7 +105,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="postal-code"
-          v-model="address.postal_code"
+          v-model="model.postal_code"
           type="text"
           required
           name="postal-code"
@@ -136,7 +122,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="city"
-          v-model="address.city"
+          v-model="model.city"
           type="text"
           name="city"
           required
@@ -153,7 +139,7 @@ const address = computed({
       <div class="mt-2">
         <select
           id="country"
-          v-model="address.country_code"
+          v-model="model.country_code"
           required
           name="country"
           autocomplete="country-name"
@@ -170,14 +156,14 @@ const address = computed({
       </div>
     </div>
 
-    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
+    <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Telefonnummer") }}
       </label>
       <div class="mt-2">
         <input
           id="phone"
-          v-model="address.phone_number"
+          v-model="model.phone_number"
           type="text"
           name="phone"
           autocomplete="phone-number"
@@ -186,12 +172,12 @@ const address = computed({
       </div>
     </div>
 
-    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
+    <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="birth-date" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Geburtsdatum") }}
       </label>
       <div class="mt-2">
-        <ItDatePicker v-model="address.birth_date"></ItDatePicker>
+        <ItDatePicker v-model="model.birth_date"></ItDatePicker>
       </div>
     </div>
   </div>