A bug when a field has undefined value

[plantain-00]

just use vue, this works

data: {
    key: undefined
}

use vue-class-component, the key is not found

class Foo extends Vue {
    key = undefined;
}

I checked the source code, should be: https://github.com/vuejs/vue-class-component/blob/master/src/data.ts#L23

if (data[key] !== undefined) {
  plainData[key] = data[key]
}

the type of my key is undefined | null, so I cannot use null to replace undefined.

[ktsn]

This restriction is needed because it will accidentally collect undefined value if we use babel + some property decorators. I'll write about this into readme later.
Work around is just use data() hook.

[plantain-00]

@ktsn
For case like:

class Foo extends Vue {
    key1 = 1;
    key2 = undefined;
}

use data() hook

means

class Foo extends Vue {
    key1 = 1;
    data () {
        return {
            key2: undefined
        };
    }
}

or

class Foo extends Vue {
    data () {
        return {
            key1: 1,
            key2: undefined
        };
    }
}

or something else? Sorry I didn't follow.

[ktsn]

@plantain-00 Yes, you are right.

[shulhi]

@ktsn Is this ever get fixed?

[johnhargrove]

This behavior cost me quite a lot of time. Is there documentation why it is the way it is @ktsn ? I checked the README but it didn't have the aforementioned explanation. So, you can do:

@Component({})
export default class RegisterComponent extends Vue {
  private firstName: string;
}

And end up with strange errors about the field being missing even though it's CLEARLY there. Very counter intuitive.

I think this is made worse by the TypeScript strictNullChecks compiler flag not catching undefined fields. That battle seems to be waging on in microsoft/TypeScript#8476

Thank you for your help!

[ktsn]

Sorry, I totally forgot to write about this behavior in readme. I've just done. cb8d9de

[johnhargrove]

Thank you for that