CODEWITHSUNDEEP
typescriptvue.js
benams
benams

Reputation: 4656

How to reference a component's data from its method in Vue with Typescript?

I started a vue.js project with typescript and I want to use single file components, and not class-styled ones. I constantly get error TS2339 when trying to reference my components' data, with the "this" keyword:

export default { 
  data(){ 
    return { x: 10 as number };
  },
  methods: {
    foo() {
      if(this.x > 10) {
        return this.x;
      }
    }
  }
}

It always leads to "TS2339 Property 'x' does not exist on type 'CombinedVueInstance

Upvotes: 0

Views: 495

Answers (1)

Phil
Phil

Reputation: 815

The reason why it's not working is briefly explained in the official documentation.

You need to use the following syntax in a SFC

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  
})
</script>

Upvotes: 2

Related Questions