feat(vue): fix

tidbcloud · Jul 25, 2024 · 01c2846 · 01c2846
1 parent 0faf36e
commit 01c2846
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/packages/vue/src/sql-editor.vue b/packages/vue/src/sql-editor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, inject, watchEffect } from 'vue'
+import { ref, watch, inject, onMounted } from 'vue'
 import {
   CreateSQLEditorOptions,
   createSQLEditorInstance,
@@ -33,20 +33,26 @@ function editorIdChange(newId: string, oldId: string) {
     })
     editorCache.addEditor(newId, newInst)
   }
+  newInst.changeTheme(props.theme ?? [])
+  newInst.changeSQLConfig(props.sqlConfig ?? {})
   editorContainerRef.value.appendChild(newInst.editorView.dom)
   newInst.editorView.focus()
 }
-editorIdChange(props.editorId, '')
 
-watch(() => props.editorId, editorIdChange)
-
-watchEffect(() => {
-  editorCache.getEditor(props.editorId)?.changeTheme(props.theme ?? [])
+onMounted(() => {
+  editorIdChange(props.editorId, '')
 })
 
-watchEffect(() => {
-  editorCache.getEditor(props.editorId)?.changeSQLConfig(props.sqlConfig ?? {})
-})
+watch(() => props.editorId, editorIdChange)
+watch(
+  () => props.theme,
+  (newVal) => editorCache.getEditor(props.editorId)?.changeTheme(newVal ?? [])
+)
+watch(
+  () => props.sqlConfig,
+  (newVal) =>
+    editorCache.getEditor(props.editorId)?.changeSQLConfig(newVal ?? {})
+)
 </script>
 
 <template>