Vue input value re-parsed on input event


This codepen contains a text-box component consisting of an input and a button for clearing.

When the first text-box is empty or cleared, the ‘Clear’ button is removed by v-if. At this point, the first entry into the input field immediately deleted and the button shown. This is because the default value of the value property is re-asserted.

The second text-box has the value ‘Bob’ passed in. This is also reasserted on editing the text box.

Should this be happening? I would expect the value property to behave as if the initial value and not be re-parsed every time I type.

NOTE: The component I am developing needs to be able to cope with and without v-model.
NOTE 2: I have omitted v-model to keep the example clear.


P.S. Apologies to anyone who caught me tweaking the codepen, thought I’d forked.

P.P.S. I know I can work around this, but wondered if the work around is simply what I"m supposed to be doing.


Not sure if this is possible as v-model is basically just syntax sugar to input & emit value. Why do you have this requirement?

This resolves the issue with:


Good point I sometimes forget it’s just sugar.

Reason for the requirement is purely to try and ensure my wrapped HTML inputs can be used as if an HTML input.

Tx for looking, I’ll work around it with a better understanding.


Not sure if I entirely follow. Is it that you want to create a component, but be able to pass it attributes as if it were a normal input? If so, then this is what you’re looking for:


No that’s exactly the same as my first example, which I think on further reflection should work.

Note that for base-button-2 it is simply the hiding and showing of the button which causes the value prop to be re-applied.


Well, it’s expected behaviour. showing/hiding the button re-renders the whole virtualdom for the component, and any changes are patche to the DOM.

Since the virtualdom still has the initial value, the changes found in the text-field are overwritten in that process.

Vue rendering is data-driven, it always renders what the data tells it to. So it’s necessary that you save the value of the input somewhere, otherwise Vue won’t track and overwrite it.