Vue: v-model.lazy is not updating the value of an input when it has a focus

Created on 13 Jun 2018 · 12Comments · Source: vuejs/vue

Version

2.5.16

Reproduction link

Steps to reproduce

Type Jacob into the input.
Hit enter.

What is expected?

Value property of the input element should be changed to Joseph, as was the value of the name property in the Vue instance.

What is actually happening?

Value property of the input element is not being changed.

The value of the input is correctly being updated when using v-model without .lazy modifier.

bug has workaround nextTick related

Source

mciesin

👍1

Most helpful comment

As a temporal workaround, you can do blur the input then focus it (I used a ref on the input)

if (name === 'Jacob') {
    this.$refs.input.blur()
    this.name = 'Joseph';
    await this.$nextTick()
    this.$refs.input.focus()
}

posva on 13 Jun 2018

👍3

All 12 comments

Can not reproduce on macOS 10.13.5 + Chrome 67.0.3396.87 / Safari 11.1.1 (13605.2.8).
Could you update issue description to include you operating system and browser version?

Misunderstood this issue at first glance. It is a bug.

sodatea on 13 Jun 2018

As a temporal workaround, you can do blur the input then focus it (I used a ref on the input)

if (name === 'Jacob') {
    this.$refs.input.blur()
    this.name = 'Joseph';
    await this.$nextTick()
    this.$refs.input.focus()
}

posva on 13 Jun 2018

👍3

Another workaround that suited me was to replace v-model with appropiate :value and @change :)

mciesin on 14 Jun 2018

To me this worked, I think is not a bug.

rof20004 on 14 Jun 2018

According to a comment in sourcecode Focused element should never be updated.

From this bug it seems like it should, the update function will not be called unless user press enter or blur anyways it seems redundant to me.

tonyraoul on 19 Jun 2018

Well, to me worked, without changes or fixes.

rof20004 on 19 Jun 2018

works well for me

softlad45 on 19 Jun 2018

The bug is introduced by this commit:
https://github.com/vuejs/vue/commit/60da366a2653a3984d79331d02ebb2ecf7e73a9a

But reverting it will reopen https://github.com/vuejs/vue/issues/7153
The only fix that can solve both bugs is to revert that commit along with nextTick implementation. So now adding a "nextTick related" label

sodatea on 22 Jun 2018

sodatea please review my pr, no need to revert the entire commit just the restriction on updating lazy elements while focused

tonyraoul on 22 Jun 2018

@tonyraoul Remove that restriction will cause another issue as described in https://github.com/vuejs/vue/issues/7153

sodatea on 22 Jun 2018

👍1

This is annoying. Will it be resolved in next version?