<input> value does not update

[skyrpex]

The example below reproduces a problem where the <input>'s value doesn't update when it's changed from the model.

Dependencies (from .yarn.lock):

babel-preset-vue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/babel-preset-vue/-/babel-preset-vue-0.1.0.tgz#adb84ceab3873bd72606fdd3f7047640f032301f"
  dependencies:
    babel-helper-vue-jsx-merge-props "^2.0.2"
    babel-plugin-syntax-jsx "^6.18.0"
    babel-plugin-transform-vue-jsx "^3.1.2"

babel-plugin-transform-vue-jsx@^3.1.2:
  version "3.4.3"

vue@^2.0.0, vue@^2.3.3, vue@^2.3.4:
  version "2.3.4"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"

Codepen

https://codepen.io/skyrpex/pen/Xgqaaz

Example

const prevent = callback => (event) => {
	event.preventDefault();
	return callback(event);
};

export default {
	data: () => ({
		query: '',
	}),
	methods: {
		onSubmit() {
			// The <p> element will change, but not the <input>.
			this.query = '';
		},
	},
	render() {
		return (
			<form on-submit={prevent(this.onSubmit)}>
				<p>Query: "{this.query}"</p>
				<input value={this.query} on-input={(e) => { this.query = e.target.value; }} />
				<button type="submit">
					Clear
				</button>
				<p>Press enter or click the button to clear the query.</p>
			</form>
		);
	},
};

[skyrpex]

Maybe related to #81.

[skyrpex]

Digging into the documentation, I found the domProps thing:

<input domPropsValue={this.query} onInput={(e) => { this.query = e.target.value; }} />

This actually works. Is the value attribute expected to be passed using domProps?

[nickmessing]

@skyrpex, hmm, I think that is expected but value={something} is a common pattern, I think it should work, let me do some research on how it works atm and I'll come back with an update. I personally prefer vue-template over jsx most of the time.

[skyrpex]

Awesome! I've made a pen that reproduces the problem.

[nickmessing]

@skyrpex, it actually does work as expected, value={something} binds to HTML property, which gets cleared (if you check it in inspect element), maybe we can consider treating it as domPropsValue for <input /> and <textarea /> because it's a common pattern. @yyx990803, is this a valid option?

[yyx990803]

@nickmessing yeah, in Vue core there's a check for bindings that should default to domProps instead of attrs: https://github.com/vuejs/vue/blob/dev/src/platforms/web/util/attrs.js#L10-L18

[nickmessing]

@yyx990803, is it okay if I make a PR for that for jsx?

[nickmessing]

@yyx990803, I think it should be just documented because we can't handle same it in spread scenarios unless we move this logic to runtime, which is not worth it IMO

[yyx990803]

@nickmessing there is a runtime helper for that (available on instances as this._b): https://github.com/vuejs/vue/blob/dev/src/core/instance/render-helpers/bind-object-props.js

[tlecreate]

Thank you very much everyone, It resolve for me. #81

[nickmessing]

As mentioned before, you can use domPropsValue instead of value and it works. Another option would be to use v-model sugar for JSX.

[koresar]

@nickmessing you have just saved my life. The sugar works perfect with Element UI.