vue-property-decorator icon indicating copy to clipboard operation
vue-property-decorator copied to clipboard

@Watch create option to generate wrapper property

Open maritaria opened this issue 6 years ago • 0 comments

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.

maritaria avatar Aug 22 '18 08:08 maritaria