fix(value-mapping): solve value mapping reactivity issue (#5451)

Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Jan 7, 2025 · 4f8f490 · 4f8f490
1 parent ffb39cc
commit 4f8f490
Showing 1 changed file with 35 additions and 3 deletions.
diff --git a/...b/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/...b/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -136,7 +136,37 @@ const handleUpdateBasedOn = (key: string) => {
     keyInfo.value = key;
 };
 const handleUpdateOperator = (idx: number, operator: 'eq'|'regex') => {
-    casesInfo.value[idx].operator = operator;
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            operator,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdatePattern = (idx: number, pattern: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            match: pattern,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
+};
+const handleUpdateValue = (idx: number, value: string) => {
+    const prevCases = [...casesInfo.value];
+    casesInfo.value = [
+        ...prevCases.slice(0, idx),
+        {
+            ...prevCases[idx],
+            value,
+        },
+        ...prevCases.slice(idx + 1),
+    ];
 };
 
 // Update operator options
@@ -242,17 +272,19 @@ watch(() => state.invalid, (_invalid) => {
                                    required
                                    class="col-span-8"
                     >
-                        <p-text-input v-model="_case.match"
+                        <p-text-input :value="_case.match"
                                       block
+                                      @update:value="handleUpdatePattern(cIdx, $event)"
                         />
                     </p-field-group>
                 </div>
                 <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE')"
                                style-type="secondary"
                                required
                 >
-                    <p-text-input v-model="_case.value"
+                    <p-text-input :value="_case.value"
                                   block
+                                  @update:value="handleUpdateValue(cIdx, $event)"
                     />
                 </p-field-group>
             </div>