fix: Make value/type computed

vuejs · Jan 1, 2024 · 07643e9 · 07643e9
1 parent de4220d
commit 07643e9
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
 
 const state = useStateEditorContext()
 const bridgeRpc = useDevToolsBridgeRpc()
+const value = computed(() => formatInspectorStateValue(props.data.value))
 const type = computed(() => getInspectorStateValueType(props.data.value))
 const stateFormatClass = computed(() => {
   if (type.value === 'custom')
@@ -28,7 +29,6 @@ const stateFormatClass = computed(() => {
 const { isExpanded, toggleCollapse } = useCollapse('inspector-state', `${props.no}-${props.depth}-${props.data.key}`)
 
 const normalizedValue = computed(() => {
-  const value = formatInspectorStateValue(props.data.value)
   const stateTypeName = (props.data as InspectorCustomState)._custom?.stateTypeName || props.data?.stateTypeName
   if (stateTypeName === 'Reactive') {
     return stateTypeName
@@ -38,7 +38,7 @@ const normalizedValue = computed(() => {
     return ''
   }
   else {
-    const result = `<span class="state-value-${type}">${value}</span>`
+    const result = `<span class="state-value-${type.value}">${value.value}</span>`
     if (stateTypeName)
       return `${result} <span class="text-gray-500">(${stateTypeName})</span>`