diff --git a/packages/runtime-core/__tests__/helpers/useModel.spec.ts b/packages/runtime-core/__tests__/helpers/useModel.spec.ts index 4c30de2f26a..5d7075a6bab 100644 --- a/packages/runtime-core/__tests__/helpers/useModel.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useModel.spec.ts @@ -657,4 +657,47 @@ describe('useModel', () => { expect(setValue).toBeCalledTimes(2) expect(msg.value).toBe(defaultVal) }) + + test('custom getter', () => { + let changeChildMsg!: (val: boolean) => void + const getter = (value: boolean) => !value + + const Comp = defineComponent({ + props: ['msg'], + emits: ['update:msg'], + setup(props) { + const childMsg = useModel(props, 'msg', { + get: getter, + set: value => !value, + }) + changeChildMsg = (val: boolean) => (childMsg.value = val) + return () => { + return childMsg.value + } + }, + }) + + const defaultVal = false + const msg = ref(defaultVal) + const Parent = defineComponent({ + setup() { + return () => + h(Comp, { + msg: msg.value, + 'onUpdate:msg': val => { + msg.value = val + }, + }) + }, + }) + + const root = nodeOps.createElement('div') + render(h(Parent), root) + + changeChildMsg(!getter(msg.value)) + expect(msg.value).toBe(true) + + changeChildMsg(!getter(msg.value)) + expect(msg.value).toBe(false) + }) }) diff --git a/packages/runtime-core/src/helpers/useModel.ts b/packages/runtime-core/src/helpers/useModel.ts index 5bcd316931d..ace0457bcdf 100644 --- a/packages/runtime-core/src/helpers/useModel.ts +++ b/packages/runtime-core/src/helpers/useModel.ts @@ -52,7 +52,10 @@ export function useModel( set(value) { if ( - !hasChanged(value, localValue) && + !hasChanged( + value, + options.get ? options.get(localValue) : localValue, + ) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue)) ) { return