Ayice
Ayice

Reputation: 61

Using TypeScript with Vue2 and having setter on computed property causes methods to crash

I am using Vue 2.7.14 and have a problem, when trying to migrate from JS to TS. When using setters for my computed properties, I get an error from Vetur, in all my methods calling a property from the data function:

Property '<property>' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.Vetur(2339) 

Event though the property 100% sure exists.

This error is triggered on my pc but not on my colleagues'.

Example of what can cause the error:

<script lang="ts">
export default {
data() {
  return {
    test: 'hello world'
  }
},
computed: {
  testing: {
    get() {
      return this.test;
    },
    set(value) {
      console.log(value);
    }
  }
},
methods: {
  testMethod() {
    // Test gets a red underline here and gets said error
    this.test = 'hello Mom'
  }
}
</script>

My gut is telling me this problem probably has something to do with Vetur parsing TS, but how to solve?

After further investigation this seems to be a problem with TypeScript and Vue2. When adding lang to ts on the script tag, it will throw an error everywhere a method is calling a data property.

Upvotes: 0

Views: 184

Answers (0)

Related Questions