Quasar, typescript, can't define variable

[Ewa]

Hi everyone

How to define variable in quasar typescript component? I tried this:

<template>
  <div>
    {{test}}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Navigation extends Vue {

private test = "this is test message"

}
</script>

end error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Navigation> at src/components/navigation/Navigation.vue
       <App> at src/App.vue
         <Root>

I use quasar-cli and yarn
package json:

"dependencies": {
  "@quasar/extras": "^1.0.0",
  "axios": "^0.18.1",
  "quasar": "^1.9.5",
  "vue-class-component": "^7.2.2",
  "vue-i18n": "^8.0.0",
  "vue-property-decorator": "^8.3.0"
},
"devDependencies": {
  "@quasar/app": "^1.6.2",
  "@types/node": "^10.17.15",
  "@typescript-eslint/eslint-plugin": "^2.17.0",
  "@typescript-eslint/parser": "^2.17.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^6.8.0",
  "eslint-config-airbnb-base": "^14.0.0",
  "eslint-loader": "^3.0.3",
  "eslint-plugin-import": "^2.20.1",
  "eslint-plugin-vue": "^6.1.2"
},
"engines": {
  "node": ">= 10.18.1",
  "npm": ">= 6.13.4",
  "yarn": ">= 1.21.1"
},
"browserslist": [
  "last 1 version, not dead, ie >= 11"
],
"resolutions": {
  "@babel/parser": "7.7.5"
}

[Allan-EN-GB]

The code you have should be working. I’ve mocked up the same test case and it’s working fine. I thought it was an issue with the private var declaration but that’s not a problem

Can you try removing node_modules and then yarn again please, then quasar dev again and see if it’s still an issue?

[Allan-EN-GB]

If that doesn’t work, can you please create a new project with the typescript option and class API. We’re confident that works. Once you’ve done that, compare the 2 and see what the differences are.

[Ewa]

Thank you for your answer.

First one of your solution didn’t help.

About second: class API you mean Class-based? I had it because it give me vue-property-decorators. And, exaclly because of it, it’s strange for me.

[Ewa]

hi, someone is still here?

[s.molinari]

@Ewa - can you create a new project and use Standard instead of Airbnb? I ran it with Standard code standard myself and tested your code and it worked fine/ as expected.

Scott