vue-class-component syntax with typescript

Question

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?

Despite the tag, this question is not related to vuejs3.

Paleo
– Paleo

2020-01-08 09:18:04 +00:00
Commented Jan 8, 2020 at 9:18 — Paleo
– Paleo, Commented Jan 8, 2020 at 9:18

Benoit Messiaen · Accepted Answer · 2020-01-08 09:20:23Z

3

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

answered Jan 8, 2020 at 9:20

Benoit Messiaen

2241 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue-class-component syntax with typescript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related