CODEWITHSUNDEEP
typescriptvue.jsecmascript-6components
Treegardener
Treegardener

Reputation: 71

Accessing data in a vue component from methods

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.

Upvotes: 7

Views: 3496

Answers (3)

SeyyedKhandon
SeyyedKhandon

Reputation: 6131

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)

Upvotes: 3

onlyjsmith
onlyjsmith

Reputation: 201

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.

Upvotes: 1

Treegardener
Treegardener

Reputation: 71

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.

Upvotes: 0

Related Questions