Vue 2 - input value is not updated in some cases

Vue.js version

2.0.0.rc.7 and older

Reproduction Link

https://jsfiddle.net/Lonzpg7h/

Steps to reproduce

1. Type one letter into input field - value won’t show up but console logs that event was fired
2. Type more text - you will see now that value is updating correctly
3. Now repeat step 1 but with removed this.isDirty = value !== '' or 'is-dirty': this.isDirty declaration - value shows up immediately

What is Expected?

I think input value should be visible on the first keystroke as well

What is actually happening?

In some case input value doesn’t show up until you enter text for the second time.

Any idea what’s going on here?

[LinusBorg]

So what happens here is this:

• onInput is triggered for the first time
• this changes isDirty from true to false
• this leads to a re-render of the component because isDirty is used in the render function
• since the prop this.value is still an empty string '', the content of the input is reset.
• subsequent calls to oInput don’t lead to a re-render because this.isDirty is already true

This only happens because you don’t $emit the event. If you do,

• the parent gets the value
• that triggers an update of the value prop in the child
• that would lead to the new value being inserted in the input upon that first re-render.

…and everything would be fine. Your example broke the cycle, so to speak.

Edit: ah, Centaur beat me to it.

[Centaur]

@sqal

In vue 2.0,

<textfield v-model="text"></textfield>

means if you don’t fire input event from textfield, the value prop of textfield will always remain the initial value of text which is ''.

Since you never fire any input event, so value prop never changes, so the only thing that can trigger the re-render of textfield is the isDirty state.

When you input a char for the first time, the char appears first, this is the native behavior of input tag. Then this input causes the change of isDirty from false to true, which in turn causes the re-render of textfield, notice that it’s value is still empty, so the content of the input gets cleared.

For the subsequent char inputs, the native behavior of input still takes effect so you can see them as well. But this time, isDirty remains true, so no re-render occurred on textfield so the content is not cleared.

If this.isDirty = value !== '' is removed, even the first re-render does not occur because isDirty has not changed, so you can see what you have input immediately, that is just the consequence of textfield not being re-rendered.

I modified your code into a template-based one to make things clearer.