vetur: When using shorthand function initializer on `computed`, `this.foo` shows error

I have searched through existing issues
I have read through docs
I have read FAQ

Info

Platform: MacOS
Vetur version: 0.18.0
VS Code version: Version 1.33.0-insider (1.33.0-insider)

Problem

In a Vue application that is using just plain Javascript (<script>), setting

  "compilerOptions": {
    "checkJs": true
  }

in jsconfig.json to enable the new features mentioned in 0.18.0 ( “compilerOptions”: { “checkJs”: true }) causes many things that were errors to show up as errors.

imports can’t be found using the ‘@’ shortcut:

Variables defined in a data() section are not recognized:

Reproducible Case

Create a new vue (cli) app, add some variables in a data statement, see the errors. Try adding an import with a @.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 21 (9 by maintainers)

Most upvoted comments

@denis-pujdak-adm-it Patcher56 is correct, you need to use Vue.extend(...) or Typescript can’t infer anything about the component options. You’re missing the parentheses in your screenshot; it’s a function call:

export default Vue.extend({
    data() {
        // etc.
    }
});

mrozekma on Sep 12, 2019

Sorry that’s overlapped behind the hover. Try thisIsSelected: function() {.

As for mapState. I didn’t find your usage in the docs: https://vuex.vuejs.org/guide/state.html.

octref on Apr 3, 2019