Vue-class-component: Class properties not being added to data

[tomdegoede]

I'm currently experiencing an issue where the class properties are not being added to data.

Webpack loader:

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
        presets: ['es2015'],
        plugins: [
            'transform-decorators-legacy',
            'transform-class-properties',
        ]
    }
},

Using the linked @prop decorators does work.

import { Component, prop, watch } from 'vue-property-decorator';

@Component({
    template: `
    <div>
      <input v-model="msg">
      <p>prop: {{propMessage}}</p>
      <p>msg: {{msg}}</p>
      <p>helloMsg: {{helloMsg}}</p>
      <p>computed msg: {{computedMsg}}</p>
      <button type="button" @click="greet">Greet</button>
    </div>
  `,
})
export class Diet {
    // initial data
    @prop({
        type: Number,
        default: 123
    })
    msg;

    @prop(String)
    propMessage;

    helloMsg = 'Hello';

    // // lifecycle hook
    // mounted () {
    //     this.greet()
    // }

    // computed
    get computedMsg () {
        return 'computed ' + this.msg
    }

    // method
    greet () {
        alert('greeting: ' + this.msg)
    }
}

helloMsg will not be available here.

[ktsn]

@tomdegoede
Sorry, this feature is not released yet because there is an issue related to this feature.
But I just solve this and will send PR for it. Please wait until next release.

[tomdegoede]

Awesome thanks!

[mvujica]

Really need this to test vue 2.0 in typescript! Will you merge @kaorun343 @prop and @watch decorators in this repository? It would be great to have official complete package.

[ktsn]

Released as v4.3.0

@mvujica
In my personal thought, I currently do not think about merging because there are various approach and they have both pros and cons on TypeScript, sorry.
It probably include such decorator in the future but I think we need to consider about API design for now.

FYI: from v4.3.0, you can create your own decorator easily.
https://github.com/vuejs/vue-class-component#create-custom-decorators

[tomdegoede]

It does cause warnings when @prop is used.

vue.js:2643 [Vue warn]: The data property "nutrients" is already declared as a prop.

Adding if(Component.props === undefined || Component.props[key] === undefined) in lib/data.js line 13 does resolve this.

[ktsn]

Hm, it seems happens on Babel + Decorator environment. I'll look into it.

[ktsn]

Fixed on v4.3.1