From 05527a41a1c063b16714f374d0b9c953fa9d8a2d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 29 Mar 2024 14:17:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E9=80=89=E6=8B=A9=E5=99=A8=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/fields/DataSourceFieldSelect.vue      | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceFieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect.vue
index a7568e75..ed71a196 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect.vue
@@ -17,7 +17,6 @@
     <TMagicButton
       v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
       style="margin-left: 5px"
-      link
       :size="size"
       @click="editHandler(selectedDataSourceId)"
       ><MIcon :icon="Edit"></MIcon
@@ -25,7 +24,6 @@
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
-      link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
@@ -43,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
+import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin, Edit } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -137,16 +135,23 @@ const cascaderConfig = computed<CascaderConfig>(() => {
 
 const showDataSourceFieldSelect = ref(false);
 
-onMounted(() => {
-  const value = props.model[props.name];
-  if (
-    Array.isArray(value) &&
-    typeof value[0] === 'string' &&
-    value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-  ) {
-    showDataSourceFieldSelect.value = true;
-  }
-});
+watch(
+  () => props.model[props.name],
+  (value) => {
+    if (
+      Array.isArray(value) &&
+      typeof value[0] === 'string' &&
+      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+    ) {
+      showDataSourceFieldSelect.value = true;
+    } else {
+      showDataSourceFieldSelect.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const mForm = inject<FormState | undefined>('mForm');