tab ที่ผ่านมาแล้วเปลี่ยนเป็นสีเขียว

src/modules/01_exam/components/Address.vue

@@ -14,6 +14,7 @@
       :save="saveData"
       :history="true"
       :addData="addData"
+      :cancel="cancelData"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -224,7 +225,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 import http from '@/plugins/http'
@@ -237,7 +238,7 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const addressData = ref<Address>(defaultAddress)
 const myform = ref<any>()
 const codep = ref<string>('')
@@ -249,17 +250,26 @@ const districtCOptions = ref<DataOption[]>([])
 const subdistrictOptions = ref<zipCodeOption[]>([])
 const subdistrictCOptions = ref<zipCodeOption[]>([])
 
-const getClass = (val: boolean) => {
-  return {
-    'full-width inputgreen cursor-pointer': val,
-    'full-width cursor-pointer': !val
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
-}
+})
+
+const emit = defineEmits(['update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
+  }
+})
 
 onMounted(() => {
-  fetchProvince()
-  fetchDistrict(addressData.value.provinceId, '1')
-  fetchDistrict(addressData.value.provinceIdC, '2')
+  //   fetchProvince()
+  //   fetchDistrict(addressData.value.provinceId, '1')
+  //   fetchDistrict(addressData.value.provinceIdC, '2')
 })
 
 const saveData = async () => {
@@ -381,4 +391,13 @@ const fetchSubDistrict = async (id: string, position: string) => {
       //   loader.value = false;
     })
 }
+
+const cancelData = () => {}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
 </script>