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.

Possible duplicate of [What is Vue way to access to data from methods?](https://stackoverflow.com/questions/36176073/what-is-vue-way-to-access-to-data-from-methods) — Michał Perłakowski, May 24 '18 at 09:48
Thanks for linking this post. The author was able to use 'this' in the components context. My problem is, that the context for 'this' refers only to the methods object. — Treegardener, May 24 '18 at 10:34
yes, I just tried it a min before. "TS2339: Property '$data' does not exist on type '{ receiveValues(value1: string, value2: string): void; test(): string; }'." — Treegardener, May 24 '18 at 10:39
do you use Vue.extend or Component generator to declare your component in Typescript? It looks like you just use plain object like in javascript for Vue components that is not correct. — Max Sinev, May 24 '18 at 12:34

SeyyedKhandon · Answer 1 · 2020-01-13T16:20:04.843

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

export default{}

check below steps:

first you should set lang to "ts

<script lang="ts">
next you should import vue

import Vue from "vue";
use export default Vue.extend instead export default

export default Vue.extend({ name: "app" as string, })
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)

score 1 · Answer 2 · answered Feb 16 '19 at 12:03

The comment on one answer from Max Sinev really helped me, but might be easy to miss for others, so am reposting:

do you use Vue.extend or Component generator to declare your component in Typescript? It looks like you just use plain object like in javascript for Vue components that is not correct

I accidentally used a plain object, and was seeing all kinds of issues. Changing to to Vue.extend({}) sorted everything out.

score 0 · Accepted Answer · answered May 29 '18 at 07:09

To all the people who have the same problem as I had: I still don't know why I couldn't access the right context with 'this', But I found a solution which worked for me:

I used typescript decorators for class files from Vue Class Component and now it works! In my opinion the code is even easier to write and cleaner! Thanks to @Michał Perłakowski and @Max Sinev for their help.

Accessing data in a vue component from methods

3 Answers3