Subscribe on changes!

v-model.lazy fails to update input.value on the input element

avatar
Jun 12th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNq9VE1v2zAM/SuED2uCxfaKbhfPSbNhAwp0a4auQy+++INNvdiSINFOvSL/fZRst1kX5FgDNizxkXx8EvnofVIqaBv0Ii82uS4VgUFq1CIRAGWtpCZ41Hg3g1zWqiEsdnCnZQ0n7HTyMREWl0thCIqUUpgDgycfpmwBfuz3rhE5lVJAKfLJFB57i0UHbVo1CG/ncGo3d73lCV/gYbw/H+Fx2HNmtrwgrFWVEjrucVG27gfgoiT49QOkhi+r2ysgaZlorFGQ3eQ046Lhla3C5Ql677jXwj4398iurIKBVCM0phRroE7hPPEIHyjxIBUFCEkgmjpDPQMjgdhLp1u4uPn+rY/kYgzFFBKN81gjQaM4PRaQddbLIGywA0NabhhkQ5csNKYFbDkkVp3TF4C14tPgnZSFa0vqRuphzz0OBzFYJmr9WhZYwdXqBqr0TweT29X15c+pAzpmY7n8DGCuz+qSeHumf+re218y50JuRdCoQGlsWViGseKHUe7zjOPDSDxH2r4j155nnC0+X68uv17FYbY4yjewDq9P2kKj/ljfwDK/T8Uaj8rbgw8RHbzZNHFZpjBfgPuD87HT3PI8oFTz3Tkf7lPEV6+qXrHoONzrO14a6qq+BV21T/1bGgZ1EWSVzDfDeKiZein8TBLJOoLTd+rBWdwk4Ds7Oh/APU8Al8+bef208utUBb+NFDzRnDdX5Awm8aIxXuJxv9h14t0TKROFYSPUZh3wkAuXbAt1I6is0S9kvTwLzoL33EKG9rcDNLWfabk1qDlh4s32Yoe82aL2NYoCNeqjuV5g9/O9MP2Xc1Bh5+3+Al++35I=

Steps to reproduce

  1. Use v-model.lazy on an input element.
  2. Setup keydown event listeners that will change the value.

What is expected?

The input element's value gets updated and shows the new value. E.g. input.value of the element should get updated.

What is actually happening?

input.value and the value displayed in the input box remains stale / not updated.

System Info

No response

Any additional comments?

The important part is that something updates the ref and the input.value has not yet been updated, and needs to be updated by vue reactivity. Simply typing in the input box won't trigger the bug as you are immediately updating the input.value.

Removing lazy works.

Work around: Use :value and @change instead of v-model.lazy

May relate to https://github.com/vuejs/core/issues/6564