Component v-model API change by yyx990803 · Pull Request #31 · vuejs/rfcs (original) (raw)
Adjust v-model API when used on custom components.
This builds on top of #8 (Replace v-bind's .sync with a v-model argument).
danielelkington, laosb, posva, houd1ni, skyrpex, SilentDepth, beeplin, SnosMe, l-hammer, bdreesen, and 49 more reacted with thumbs up emoji denisinvader reacted with thumbs down emoji santoshe61 reacted with hooray emoji
This was referenced
Apr 10, 2019
Having an additional attribute for custom elements to support native-like behaviour for v-model is kind of strange. I would love to see v-model support an extra argument for that case with a special symbol, for example:
<custom-input v-model:enabled@checkbox="inputEnabled" />
@CyberAP I also thought about that, but a modifier woud make more sense instead of @: v-model:enabled.checkbox="inputEnabled"
It would be nice if lazy was a type, whichever syntax is ultimately chosen.
This will be breaking a lot of packages which implement v-model on custom components.
In 3.0, the model option will be removed. v-model="foo" (without argument) on a component compiles to the following instead:
Why not leave the model option for the first few 3.x versions, deprecate it so that the upgrade path will be easier for existing Vue 2.x packages ?
@edcoreweb i think such option removals must happen in major version bumps like 2->3 or 3->4. If you don't remove it in 3.0.0, you will not be able to remove it until 4.0.0.
wouldnt it be better to name the default model value prop default? this aligns with slots and es modules.
maybe the BC break is a little harder since default is more likely to conflict than modelValue, but not that likely and there are BC breaks regarding this anyway, so might as well take the pill now for improved consistency.
This RFC is now in final comments stage. An RFC in final comments stage means that:
The core team has reviewed the feedback and reached consensus about the general direction of the RFC and believe that this RFC is a worthwhile addition to the framework.
Final comments stage does not mean the RFC's design details are final - we may still tweak the details as we implement it and discover new technical insights or constraints. It may even be further adjusted based on user feedback after it lands in an alpha/beta release.
If no major objections with solid supporting arguments have been presented after a week, the RFC will be merged and become an active RFC.
Co-Authored-By: Jacek Karczmarczyk jkarczm@gmail.com
I believe the model is text, not foo, in v-model.foo.bar="text"
@sqal yeah, good catch! We need to generate different prop for v-model with args.
Update: fixed in vuejs/core@f178874
v-model API change Component v-model API change
Why is it not possible to write model handler in render function with modifiers?
Example: onUpdate:foo.number.
Or at least define it as an object?
h('Foo', { 'onUpdate:bar': { handler: val => (baz = val), trim: true, } })
I think, writing 'onUpdate:modelValue' in JSX is quite ugly. So, to implement an input in a shared library that fits templates and render functions ways you have to support two props and two events (for single-prop v-model) or write uncommon (less native/classic) JSX
@CyberAP @denisinvader the format is optimized for the consuming component and the compiler. For manual render functions you can always build a little helper to make the usage read nicer:
withModel(h(SomeComp), { prop: 'foo', // optional value: foo, update: value => (foo = value), modifiers: { trim: true } })
@denisinvader Vue will have its own JSX transform which gives us the ability to handle the transform for you. The 2.x transform only handles <Comp vModel={foo} />, we do need to discuss how the syntax should look like for v-model with arguments and modifiers in JSX for 3.0.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
[ Show hidden characters]({{ revealButtonHref }})