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

Question

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

tony19 · Accepted Answer · 2022-07-15 23:32:11Z

2

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>

edited Jul 15, 2022 at 23:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 22, 2019 at 20:46

Phil

8158 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related