Skip to content

defineModel and v-model value mismatch with native input binding #13321

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ZhouYC404 opened this issue May 13, 2025 · 1 comment
Closed

defineModel and v-model value mismatch with native input binding #13321

ZhouYC404 opened this issue May 13, 2025 · 1 comment

Comments

@ZhouYC404
Copy link

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqVU11r2zAU/StCL3agUxhZYWROYBt52GAfdKNPgmGcm9SdLAlJdgMh/71XV7bjftDSBxvrnnO/jo6P/LO1omuBL3nhK1fbwDyE1q6lrhtrXGBH5mDHTmznTMMypGYjVN3UatsDYk6nWCv7NEm+K0N18yAdUQWB2dKBDtelaoGtYo88C+BDNutxKneFrROoW6UiRPXyfLZaTwqILr4vYvQoNWOV0d4oEMrscwqwabvl08zEoZaJMnRPuGjMFhQhPbXWtu2rPaISMh4j+zSTOj7FPCmM2uIhQGNVGQBPjBVJSlx0JflQUHLWvaPOGJzMLPm6SGpjbjGfFOIXPHhcflfvxa03Gm+V1seaprG1AvfLhhrFkXzJemEkL5Uyd98pFty4YZwDqv/PxG/9IcYk/+3Ag+twoBELpdtDSPDmz0844PcI4i6tQvYL4BXgxbVxxkT70uotjj3h0bTfyF613v/1m0MA7Yel4qCkOfElR8N9fWH187gL8YHy8KpQxdHLb/svou8CO5sFvbuFXa3hRwzl6IHEGDwy9bbUibo5WOMhP04sN9BfMxHxehMNOQ9MdK5JHiLOMx7614GLiuLyC3Ep3i9iLPjrMXopPooFP90DV0h0uA==

Steps to reproduce

1、Open DevTools
2、Enter the number 1 in the input box

What is expected?

The console should log:
{ parentValue: 'test1', childValue: 'test1', inputValue: 'test1' }

What is actually happening?

The console logs:
{ parentValue: 'test1', childValue: 'test', inputValue: 'test1' }

System Info

Any additional comments?

No response

@edison1105
Copy link
Member

This is because the modelValue of the child component has not been updated synchronously when logging.
use the flush: 'post' option.

watch(() => parentValue.value, () => {
  console.log({
    parentValue: parentValue.value,
    childValue: childRef.value.modelValue,
    inputValue: childRef.value.inputRef.value
  })
}, {
  flush: 'post'
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants