fix: แก้ Options รับค่าจากไฟล์ json

src/components/03_customer-management/FormBusiness.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { dateFormat } from 'src/utils/datetime';
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { t, locale } = useI18n({ useScope: 'global' });
 
 const employmentOffice = defineModel<string>('employmentOffice');
 const bussinessType = defineModel<string>('bussinessType');
@@ -15,35 +19,10 @@ const wageRate = defineModel<number>('wageRate');
 
 const saleEmployee = defineModel<string>('saleEmployee');
 
-const typeBusinessOptions = [
+const rawOption = ref();
-  {
-    value: '1',
-    label: 'ประเภทบริษัท 1',
-  },
-  {
-    value: '2',
-    label: 'ประเภทบริษัท 2',
-  },
-  {
-    value: '3',
-    label: 'ประเภทบริษัท 3',
-  },
-];
 
-const jobPositionOptions = [
+const typeBusinessOptions = ref([]);
-  {
+const jobPositionOptions = ref([]);
-    value: '1',
-    label: 'ตําแหน่งงาน 1',
-  },
-  {
-    value: '2',
-    label: 'ตําแหน่งงาน 2',
-  },
-  {
-    value: '3',
-    label: 'ตําแหน่งงาน 3',
-  },
-];
 
 defineProps<{
   title?: string;
@@ -52,6 +31,22 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
 }>();
+
+onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  rawOption.value = await resultOption.json();
+
+  if (locale.value === 'en-US') {
+    typeBusinessOptions.value = rawOption.value.eng.businessType;
+    jobPositionOptions.value = rawOption.value.eng.position;
+  }
+  if (locale.value === 'th-th') {
+    typeBusinessOptions.value = rawOption.value.tha.businessType;
+    jobPositionOptions.value = rawOption.value.tha.position;
+  }
+  5;
+  console.log(typeBusinessOptions.value);
+});
 </script>
 <template>
   <div class="col-12 app-text-muted"></div>