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 = ref<string>('');
+const tab = defineModel<number>('tabIndex', { required: true });
 
 const index = ref<number>(0);
 
@@ -34,16 +32,19 @@ function addData() {
     districtId: '',
     provinceId: '',
   });
+
+  tab.value = customerBranch.value.length - 1;
 }
 
-async function close(index: number) {
+function close(index: number) {
+  console.log(customerBranch.value.length, index);
+  if (customerBranch.value.length - 1 === index) {
+    tab.value = tab.value - 1;
+  }
+
   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,20 +66,20 @@ 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
-        id="closeDialog"
-        icon="mdi-close"
-        padding="xs"
-        color="red"
-        :class="{ dark: $q.dark.isActive }"
-        @click="close(index)"
-      />
+      >
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-close"
+          padding="xs"
+          color="red"
+          :class="{ dark: $q.dark.isActive }"
+          @click.stop="close(index)"
+        />
+      </q-tab>
     </q-tabs>
   </div>
   <div class="column">