fix: แก้ function clos ลบ ตัวสุดท้าย เเต่ index ไม่เปลี่ยน

src/components/TabComponent.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { CustomerBranchCreate } from 'stores/customer/types';
 
 const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
   default: [],
 });
 
-const indexTab = defineModel<number>('indexTab');
+const tab = defineModel<number>('tabIndex', { required: true });
-
-const tab = ref<string>('');
 
 const index = ref<number>(0);
 
@@ -34,16 +32,19 @@ function addData() {
     districtId: '',
     provinceId: '',
   });
+
+  tab.value = customerBranch.value.length - 1;
+}
+
+function close(index: number) {
+  console.log(customerBranch.value.length, index);
+  if (customerBranch.value.length - 1 === index) {
+    tab.value = tab.value - 1;
   }
 
-async function close(index: number) {
   if (customerBranch.value.length > 1) {
     customerBranch.value.splice(index, 1);
   }
-  // tab.value = await tabList.value[tabList.value.length - 1].name;
-  setTimeout(() => {
-    tab.value = `สาขาที่ ${customerBranch.value.length.toString()}`;
-  }, 10);
 }
 </script>
 <template>
@@ -65,10 +66,9 @@ async function close(index: number) {
         :key="index"
         :name="index"
         :label="`${$t('customerBranchFormTab')} ${index + 1}`"
-        @click="indexTab = index"
+        @click="tab = index"
         no-caps
-      />
+      >
-
         <q-btn
           round
           flat
@@ -77,8 +77,9 @@ async function close(index: number) {
           padding="xs"
           color="red"
           :class="{ dark: $q.dark.isActive }"
-        @click="close(index)"
+          @click.stop="close(index)"
         />
+      </q-tab>
     </q-tabs>
   </div>
   <div class="column">