fix(components): [cascader] modelValue update problem (#10119)

* fix(components): [cascader] modelValue update problem * fix(components): [cascader-panel] modelValue update * fix(components): [cascader] use cloneDeep
element-plus · Oct 19, 2022 · aafdafa · aafdafa
1 parent 36b6106
commit aafdafa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
@@ -26,7 +26,7 @@ import {
   ref,
   watch,
 } from 'vue'
-import { flattenDeep, isEqual } from 'lodash-unified'
+import { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'
 import { isClient } from '@vueuse/core'
 import {
   castArray,
@@ -238,7 +238,7 @@ export default defineComponent({
           values.map((val) => store?.getNodeByValue(val, leafOnly))
         ) as Node[]
         syncMenuState(nodes, forced)
-        checkedValue.value = modelValue!
+        checkedValue.value = cloneDeep(modelValue)
       }
     }
 
@@ -348,15 +348,21 @@ export default defineComponent({
       () => {
         manualChecked = false
         syncCheckedValue()
+      },
+      {
+        deep: true,
       }
     )
 
-    watch(checkedValue, (val) => {
-      if (!isEqual(val, props.modelValue)) {
-        emit(UPDATE_MODEL_EVENT, val)
-        emit(CHANGE_EVENT, val)
+    watch(
+      () => checkedValue.value,
+      (val) => {
+        if (!isEqual(val, props.modelValue)) {
+          emit(UPDATE_MODEL_EVENT, val)
+          emit(CHANGE_EVENT, val)
+        }
       }
-    })
+    )
 
     onBeforeUpdate(() => (menuList.value = []))
 

diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
@@ -196,7 +196,7 @@
 // @ts-nocheck
 import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
 import { isPromise } from '@vue/shared'
-import { debounce } from 'lodash-unified'
+import { cloneDeep, debounce } from 'lodash-unified'
 
 import { isClient, useResizeObserver } from '@vueuse/core'
 import ElCascaderPanel, {
@@ -416,7 +416,7 @@ export default defineComponent({
 
     const checkedValue = computed<CascaderValue>({
       get() {
-        return props.modelValue as CascaderValue
+        return cloneDeep(props.modelValue) as CascaderValue
       },
       set(val) {
         emit(UPDATE_MODEL_EVENT, val)