v-model.sync to automatically emit a prop's changes as an event

[dylanized]

What problem does this feature solve?

v-model is a helpful tool, but it doesn't work in nested components. Instead we are supposed to use v-model on a parent component, then manually bind props and manually emit a change event within the child component. This is too verbose.

Instead, I am proposing an option for v-model that automatically emits the change event.

What does the proposed API look like?

Template for the parent component:

<div>
  <custom-input v-model='foo'></custom-input>
</div>

Template for the child component:

<div>
  <input type='text' v-model.sync='foo' />
</div>

AS AN ALTERNATIVE TO:

Template for the parent component:

<div>
  <custom-input v-model='foo'></custom-input>
</div>

Template for the child component:

<div>
  <input type='text' :value='foo' @input='$emit("input", $event.target.value)' />
</div>

[HcySunYang]

The child component's input tag may have its own v-mode binding, and according to your idea the .sync modifier seems to emit only input events.

[dylanized]

I'm just hoping to suggest a clean way to extend the v-model connection up to the parent, without having to manually write an emitter. Apologies if my example implementation isn't perfect.

In my idea, the v-model.sync variable be set as a prop, which got passed down from the parent. So there couldn't be a local v-model binding for that name.

[posva]

Although the feature is interesting, it is still convenience over a thing that is already made for convenience. There is also a major flaw: this would mean that a v-model could modify the component it is used on by creating a watcher or something similar. Which is currently not possible

To me it looks like you want an easy way to setup a prop that is meant to be used with v model or sync. I recommend you to give a look at computed setters

[bandleader]

Related: vuejs/rfcs#11 does the same but just for events, not for two-way binding.

Note: the name of the modifier .sync is out of place here. What you're looking for is more like .pass, or perhaps a directive v-pass.

Explanation: :foo.sync="expr" is actually akin to regular v-model -- it expands to

:foo="expr" @update:foo="expr=$event"

i.e. it catches the event and updates the state, just like regular v-model, which does

:value="expr" @input="expr=$event"

What you're looking for is

:value="expr" @input="$emit('input', $event)"

[bandleader]

I commented there as to why this cannot be solved with a directive.
vuejs/rfcs#11 (comment)