v-model binding incorrect order #30
Description
The v-model directive adds an on-input event.
Consider the following:
render() {
return (
<div>
<input v-model={this.model} on-input={this.someMethod} />
</div>
);
}
This generates the following output:
"on": {
"input": [this.someMethod, function ($$v) {
_this1.model = $$v;
}]
}
The problem here is the order of the generated event handler function to update the model. It's added after the manual on-input method.
This can cause issues when this.someMethod is expecting the value to have been set, but because state is synchronous, it hasn't actually been updated yet as the v-model event handler has not been executed yet.
I believe that the v-model event bindings should always be added to the start of the event handler array, to ensure that it is executed first.
I tested this on the vue-template compiler, which does handle inserting the v-model binding at the start of the event array:
For the time being, the workaround is to manually set this.model in this.someMethod.