vue-property-decorator
vue-property-decorator copied to clipboard
@Watch create option to generate wrapper property
A common use case for me with models is to get and set them using wrapping computed properties. A decorator for generating model properties that are wrapped so you can directly edit them would be in my opinion easier and would reduce complexity of your code when wanting to use @Model
Currently:
// Current
@Component
class MyComponent extends Vue {
@Model()
myModelProp;
get myModel() { return this.myModelProp; }
set myModel(value) { this.$emit('input', value); }
}
// Proposed
@Component
class MyComponent extends Vue {
@WrappedModel( // Or: rewrite/extension of @Model
'myModelProp' /* prop used in model declaration, optional (default: *Value, so here myModelValue) */
'myModelEvent' /* event name used in model declaration, optional (default input) */
{ /* propOptions */ })
myModel;
mounted() {
this.myModel = 'asdf';
}
}
The existing @Model
could be updated by allowing to pass two objects, first containing @Model
-options second containing propOptions
. The model options would include two fields, one for setting the prop name, one for setting the emit event name.
The decorator would add a computed property that gets the modeled property in the getter and emits the event in the setter.
I can create a pr if there is interest for this feature.