diff --git a/active-rfcs/0000-props-model.md b/active-rfcs/0000-props-model.md new file mode 100644 index 00000000..94126dad --- /dev/null +++ b/active-rfcs/0000-props-model.md @@ -0,0 +1,215 @@ +- Start Date: 2020-03-05 +- Target Major Version: 3.x +- Reference Issues: (fill in existing related issues, if any) +- Implementation PR: (leave this empty) + +# Summary + +Add a `prop` built-in modifier to `v-model` in order to support two-way binding for props using events. + +# Basic example + +With a `prop` modifier you'd able to create transparent `v-model` wrappers without extra hassle: + +```html + +``` + +Is equivalent to: + +```html + +``` + +--- + +Named models are also supported: + +```html + +``` + +Which is equivalent to: + +```html + +``` + + +# Motivation + +Creating wrapper components around anything that uses `v-model` could be considered a somewhat cumbersome process at the moment. + +## Built-in models + +Firstly, you'll have to know what you're dealing with when using `v-model`: an html element or a component. +It's important to distinguish between those because built-in inputs for example already have a custom behaviour for `v-model`. +In order to preserve it you'll have to use a computed `v-model`: + +```js +export default { + computed: { + model: { + get() { return this.value } + set(value) { this.$emit('input', value) } + } + } +} +``` + +Simply using `@input="$emit('value', $event)"` on `` for example won't work because you'll be working with a DOM event, that's not processed by Vue's built-in model. +You'll have to do this for each html element that has built-in `v-model` processing done by Vue (these include: ``, ``, ``, `