CODEWITHSUNDEEP
vue.js
Jon Dosmann
Jon Dosmann

Reputation: 737

VueJS: Compiler error states data property doesn't exist when access via this property

I'm getting an issue that only seems to be a problem with my compiler. It doesn't like that it can't find properties I've defined in the data section. If I replace 'this' with '(this as any)' it runs just fine. That leads me to believe that I have an issue with typescript that I need to fix. The error message is very specific to my situation but I'm not sure how to fix it.

enter image description here

EDIT to add shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Upvotes: 3

Views: 779

Answers (2)

Jon Dosmann
Jon Dosmann

Reputation: 737

What ended up fixing this was my declarative statement. My error:

export default {
    name: 'Home',
    components: {
        ...
    },
    ...
};

The fix:

export default Vue.extend({
    name: 'Home',
    components: {
        ...
    },
    ...
});

Upvotes: 1

Noah Stahl
Noah Stahl

Reputation: 7553

It appears computed properties may require explicit type annotations, as in this answer. Instead of

items() {
...
}

you'd have

items(): ItemType[] {
...
}

Typescript should then understand the this reference. It's also worth considering the class component syntax, which in my experience is better suited for typescript in Vue 2 (this issue wouldn't happen).

Upvotes: 1

Related Questions