Vue class component can't access data properties from constructor

Question

I'm trying to use Vue with typescript but am getting an error, saying that my member variable is undefined.

import { Component, Vue, Prop } from 'vue-property-decorator';
import UploadApi from './UploadApi';
import ApiConfig from '../../api/api.config';

@Component
export default class UploadCard extends Vue {
  uploading = false;

  private uploads: Array<Upload> = [];

  private api: UploadApi = new UploadApi(ApiConfig.get());

  constructor() {
    super();
    this.getUploads();
  }

  private getUploads() {
    // const loading = this.$store.state.vs.loading();
    // mimic http request
    console.log(this.$data);
    console.log(this.uploading);
    this.api.getUploads().then((response) => {
      console.log(response);
    });

Here for example it is saying this.api is undefined, does anyone know about this?

Hi! I’m not sure about your question - do you mind sharing for code, or perhaps what your UploadApimofule looks like? We’ll be able to help you better :D — MT_dev
– MT_dev, Commented Aug 28, 2020 at 14:08
The lifecycle model worked, using created instead of constructor. — sunalive
– sunalive, Commented Aug 28, 2020 at 14:13

tony19 · Accepted Answer · 2022-07-15 22:45:30Z

1

Rather than using a constructor, use the lifecycle methods to do setup tasks. For example, replace your constructor with created or mounted:

created() {
    this.getUploads();
}

Please see the docs for more details.

edited Jul 15, 2022 at 22:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 28, 2020 at 14:05

Noah Stahl

7,7235 gold badges30 silver badges42 bronze badges

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

2 Comments

sunalive Over a year ago

Ok so, the class here is a bit of red-herring? you ignore the constructor but use the lifecycle events.

Noah Stahl Over a year ago

Yes, I added a link to the docs: class-component.vuejs.org/guide/…

Collectives™ on Stack Overflow

Vue class component can't access data properties from constructor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related