Skip to content

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

@WesleyKapow

Description

@WesleyKapow

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 #6564

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions