Vue stating that a property is undefined, when I clearly defined it

Question

For a project I am trying to create a page where the user can edit a post. A post has it's content and 0 or more images. As it is saved on the database in different tables, I have created two endpoints on the Backend (/posts, /images).

The problem

On the edit component I am trying to use a Set datatype to keep track of which part of the post has been edited (post content or post images). The relevant parts of the component code for that is below.

...
@Component({
  components: { ckeditor: CKEditor.component, ImageListCard },
})
export default class ObjectEditView extends MainShell {
  private _changes = new Set<EditedAttributes>();
  ...

EditedAttributes is an enum containing the different Attributes of the post that can be edited. Upon submitting there is code to check which endpoint(s) should be submitted to.

Whenever I load the page in my browser, I get the following error upon loading.

TypeError: this._changes is undefined

What I find really weird is that it says _changes is undefined when I clearly defined _changes as a new Set.

What I've tried

I've tried the following things, to no avail.

• declaring _changes on the class and then defining it in a constructor.
• Setting _changes to a new Set in the browser console, which worked but obviously isn't a solution.
• setting _changes to a new instance of a Set again in the created hook.
• setting _changes to a new instance of a Set again in the mounted hook.

I can of course just make a boolean out of _changes and make requests to all the endpoints on every submit action. This however will put unnecessary load on the API. I can also change the Set into an array, but I've chosen for a Set since an item can only be applied once to it.

If someone could explain to me why it says it is undefined when I clearly defined it, or provide a solution for this that'd be really awesome :D.

Answer 1

I got the solution myself already. I set _changes in the mounted hook and added a component state which on the "ready" state would load the component. Therefore _changes won't be attempted to read when it is still in its undefined state.