Apologies for the confusion with the question title, I am still new to using constructors in JavaScript and struggling with how to properly phrase it. Here is the issue I am facing:
I am implementing a Builder pattern (using a constructor) to create an object and assign specific values to it. The code snippet looks like this:
DataBuilder.js
export class DataBuilder {
static getDefaultData() {
return new DataBuilder();
}
constructor() {
this.test = 'original';
this.data = {
title: `myTitle`,
meta: [
{
hid: "og:title",
name: "og:title",
property: "og:title",
content: `Would like some content here with ${this.test} in the middle of a string`,
},
]
}
}
setTestData(input) {
this.test = input;
return this;
}
build() {
return this.data;
}
}
And this is how I call it from my Vue component:
index.vue
export default {
head() {
return DataBuilder.getDefaultData()
.setTestData("testing123")
.build();
},
}
The issue arises when building the object. While this.test gets updated successfully with testing123, the content inside the meta remains unchanged showing content: original. Ideally, the meta/content should have been updated to display content: testing123.
I suspect that the this variable is not reactive or updating within the constructor. I'm unsure of the correct approach to address this. Where should I implement the necessary set function to update all the fields accordingly?