Vue, TypeScript Can't Call Component Methods

Question

I'm still pretty new to Vue and I'm having troubles working this out. From all the code examples I can find, my code looks like it should work.

I have defined a component like this:

However, when compiling I get the error:

Error TS2339 (TS) Property 'getHeaderImageUrl' does not exist on type 'Vue'.

How can I set this up so it can call it's own methods? Also is there a better approach to get a random url into an image source?

Alternatively, how would I update the data.headerImgUrl from inside the getHeaderImageUrl() method?

If I try this:

methods: {
    getHeaderImageUrl() {
        const min = Math.ceil(1);
        const max = Math.floor(14);
        const i = Math.floor(Math.random() * (max - min + 1)) + min;
        //return bgimages[i].url;
        this.headerImgUrl = bgimages[i].url;
    },
},

It errors with:

Error TS2339 (TS) Property 'headerImgUrl' does not exist on type 'Vue'.

I'm clearly still not getting the scoping on something or have configured something wrong as this seem to be really basic stuff.

UPDATE

So I've re-written my component like this:

But I'm still getting an error where the method is inaccessible:

Error TS2339 (TS) Property 'getHeaderImageUrl' does not exist on type 'CombinedVueInstance>>'.

user_5890431 · Answer

You actually combining two different approaches to create a component. Here are two examples:

using "vue-property-decorator" :

import { Vue, Component, Prop } from "vue-property-decorator";

@Component()
export default class HelloDecorator extends Vue {

    @Prop(type: String, default: "")
    name: string;

    @Prop({ type: Number, default: 1 })
    initialEnthusiasm: number;

    enthusiasm = this.initialEnthusiasm;

    increment() {
        this.enthusiasm++;
    }

    decrement() {
        this.enthusiasm--;
    }

    get exclamationMarks(): string {
        return Array(this.enthusiasm + 1).join('!');
    }
}

using extend :

import Vue from "vue";
export default Vue.extend({
    props: {
        name: {
            type: String,
            default: ""
        },
        enthusiasmLevel: {
            type: Number,
            default: 1
        }
    },
    computed: {
        helloMessage() {
            return "Hello " + this.name + this.getExclamationMarks(this.enthusiasmLevel);
        }
    },
    methods: {
        getExclamationMarks(numChars) {
            return Array(numChars + 1).join('!');
        },
        onDecrement() {
            this.$emit("onDecrement");
        },
        onIncrement() {
            this.$emit("onIncrement");
        }
    }
})

Vue, TypeScript Can't Call Component Methods

1 Answers