CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
Christian
Christian

Reputation: 26427

vue-class-component syntax with typescript

The example on https://github.com/vuejs/vue-class-component (for the component syntax that's new in vuejs3) but I'm using straight type script instead of babel. I therefore tried:

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component({
    props: {
        propMessage: String
    }
})
export default class MyComponent extends Vue {
    helloMsg = "Hello, " + this.propMessage

}
</script>

Unfortunately, this.propMessage can't be found. How do I have to change the syntax to make it found?

Upvotes: 1

Views: 472

Answers (1)

Benoit Messiaen
Benoit Messiaen

Reputation: 224

I would guess this.props.propMessage would work (but i can't test it right now) and you may have already tried.

I recommend you using @Prop decorator from vue-property-decorator which provide a clearer syntax on the long-end.

It would give something like :

@Component
export default class MyComponent extends Vue {
    @Prop() propMessage !: string;

    helloMsg = "Hello, " + this.propMessage;
}

Good luck

Upvotes: 3

Related Questions