Skip to content

Class properties not being added to data #31

Closed
@tomdegoede

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions