Accessing data in a vue component from methods

Question

I'm currently having trouble using "this" in a VueJs component in the right context. I already read a lot of answers which mostly referred to not using arrow functions. As you can see in my attached code-block, I already replaced the arrow functions with regular ones and well... the context is now different but with regards to the error message

---

"TS2339: Property 'answer1' does not exist on type '{ receiveValues(value1: string, value2: string): void; test(): string; }'."

---

the context is now the methods object. I wasted a lot of time now with this problem and I really don't know what to do. So my question is, how can I get the right context to access the data? I appreciate every help and tipps! I use the ts compiler with ES2015.

---

Code:

export default {
name: 'app',
components: {
  Editor,
  Chart,
},
methods: {
  receiveValues(value1: string, value2: string) {
    console.log(value1); 
    this.answer1 = value1; // This is where the error is thrown
    console.log('receiveValues ' + this.test()); // this works just fine
  },
  test() {
    console.log('blablabla');
    return 'did it';
  },
},
data() {
  return {
    content: 'I\'m Test Content!',
    answer1: '',
    answer2: '',
    answer3: '',
    answer4: '',
  };
},

---

Unlike in this post for example, my 'this' context only refers to the methods object, so I can only call its functions, but not the data from the component itself.

Answer 1

If you encounter ts2339 error in vuejs while using typescript with object based way:

export default{}

check below steps:

1. first you should set lang to "ts

   <script lang="ts">

2. next you should import vue

   import Vue from "vue";

3. use export default Vue.extend instead export default

   export default Vue.extend({ name: "app" as string, })

4. check if there is any mixin you have been used in this component which is based on plain old object based, which if you try above steps(2,3) on it, it will fix the problem. (consider that your mixin.js should change to mixin.ts to work as a valid typescript file)