From 8774bcdf72c4dcda4169d93ad08b420ab27de26c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 09:32:23 +0800
Subject: [PATCH] feat: ObjectHorizontalElement tab UI refactor

---
 src/components/dynamic/ObjectHorizontalElement.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/dynamic/ObjectHorizontalElement.vue b/src/components/dynamic/ObjectHorizontalElement.vue
index 8158fc0b..0b018720 100644
--- a/src/components/dynamic/ObjectHorizontalElement.vue
+++ b/src/components/dynamic/ObjectHorizontalElement.vue
@@ -3,7 +3,8 @@ import DynamicComponent from './DynamicComponent.vue';
 import { select } from './index';
 import { ref} from 'vue'
 const props = defineProps(['value']);
-const tab = ref('');
+const tab = ref(Object.keys(props.value)[0] || '');
+
 const changeTab = (val: string) => {
   tab.value = val;
 };
@@ -13,13 +14,13 @@ const changeTab = (val: string) => {
     <div class="tabs">
       <a class="tab  tab-bordered text-gray-400 uppercase" 
         v-for="(item, index) of value" :value="index"
-        :class="{ 'tab-active': tab === String(index) }"
+        :class="{ 'tab-active':tab === String(index) }"
         @click="changeTab(String(index))"
       >{{ index }}</a>
     </div>
     <div class="min-h-[25px] mt-4">
         <div v-for="(v, k) of value" :value="k">
-          <DynamicComponent :value="v" v-show=" tab === String(k)"/>
+          <DynamicComponent :value="v" v-show="tab === String(k)"/>
         </div>
     </div>
   </div>