Quasar, typescript, can't define variable



  • 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"
    }
    

  • Admin

    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?


  • Admin

    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.



  • 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.



  • hi, someone is still here?



  • @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


Log in to reply