two-way binding on a input element，Implementing native attribute "maxlength" with javascript;UI view layer not change

[parasol-tree]

Why does the UI view layer show changes only after adding line 31 of code?

Implementing native attribute "maxlength" with javascript.
Is there something wrong with my code or is this a vue bug?

Vue SFC Playground Link

[LinusBorg]

Vue only re-renders when reactive state changes. Your state doesn't change when a fifth character has been typed, because you cut away that fifth character and then assign that string to the state - but that's the same value that it previously had, so nothing "changed"

example:

1. buildInValue is 'aaaa'
2. I type an additional "b" in the input
3. the updateValue function is being called with 'aaaab'
4. that string is being shortened to 'aaaa'
5. that string is being assigned as the new value of builtInValue
6. ...but that's the same value it had before
7. ..so as far as Vue is concerned, there seems to be no reason to re-render

that also explains why your "line 31" makes it work: it shortly assigns a new value that's actually different from the previous one, hence Vue is scheduling a re-render.

[parasol-tree]

thanks