@Data decorator

#36 requests a new @Data decorator to set properties as reactive. It is resolved there as unneeded, since you can just initialize the value as null.

However, there is another situation for which a @Data decorator would be useful: if you want to initialize the value of the data member to the value of a prop. ( A reason to do this would be so you can have a variable that initially mirrors the prop, but you can change the value later).

For example:

<template>
    <input v-model="localData"></input>
</template>

<script="ts">
    import {Vue, Prop} from "vue-property-decorator";

    @Component({})
    export default MyComponent extends Vue {
        @Prop(String) data!: string;

        localData: string = data;
    }
</script>

Currently, since local class member declarations and initializations are done in the class constructor, at that point the value of the props are still undefined, so that’s what this component would display.

The current workaround for this is to use a data method in the Component options, since when Vue calls data(), the props are already initialized:

@Component({
    data() {
        return {
            localData: this.data,
        }
    },
})

If there was a @Data decorator that would convert something like this:

@Data() localData: string = data;

to a data method as above, that would make the code cleaner.

[colthreepv]

Bump, this solution it’s not adequate in my opinion.

This library is meant to be a little bit of sugar syntax on top of the very simple Vue interface, it should not overcomplicate basic things, and data is the simplest Vue Component part.

Please reconsider

[BehindTheMath]

localData doesn’t follow the change of data, in my example, because data is a primitive value.

I understand. My question was if localData would be reactive, and would the template update if localData was assigned a new value. I see now that it is, so never mind that.

Regardless, I still think that

@Data() localData = this.data;

is simpler and nicer than

    localData = ''

    created() {
        this.localData = this.data
    }

but that’s just my opinion.