Currency input

package.json

@@ -31,6 +31,7 @@
     "quasar": "^2.11.1",
     "structure-chart": "^0.0.9",
     "vue": "^3.2.45",
+    "vue-currency-input": "^3.0.5",
     "vue-router": "^4.1.6",
     "vue3-datepicker": "^0.3.4",
     "vue3-pdfjs": "^0.1.6"

src/modules/06_retirement/components/CurrencyInput.vue

@@ -0,0 +1,21 @@
+<template>
+  <input ref="inputRef" type="text" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCurrencyInput } from "vue-currency-input";
+
+const props = defineProps({
+  modelValue: Number, // Vue 2: value
+  options: Object,
+});
+
+const inputRef = ref<any>();
+
+watch(props, (count, prevCount) => {
+  console.log(" 1222", props);
+
+  if (props.options != null) inputRef.value = useCurrencyInput(props.options);
+});
+</script>

src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue

@@ -271,11 +271,13 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="salary"
+                @update:model-value="salary.toLocaleString('en-US')"
                 :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
               />
+              <CurrencyInput v-model="salary" :options="{ currency: 'EUR' }" />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
@@ -364,6 +366,7 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/modules/06_retirement/components/CurrencyInput.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -477,6 +480,7 @@ const getData = async () => {
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
       responseData.value.reason = data.reason ?? "";
       responseData.value.salary = data.salary !== null ? data.salary : 0;
+
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
       responseData.value.fullname = `${data.firstName ?? "-"} ${