From 07643e98d2e27f5691ad0e2f627df1e64e3448e9 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Mon, 1 Jan 2024 20:40:49 +0900
Subject: [PATCH] fix: Make value/type computed

---
 .../client/src/components/inspector/InspectorStateField.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/inspector/InspectorStateField.vue b/packages/client/src/components/inspector/InspectorStateField.vue
index c37e8199b..5dd708a88 100644
--- 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>`