I am attempting to retrieve the computed value in created for a GET request. I have declared the classroomBackground as a string in my data.
data() {
return {
classroomBackground: '' as string,
}
}
In the computed value, I am performing calculations and setting the value of classroomBackground.
computed: {
background: {
get(): string {
if (condition) {
return 'value1';
} if (condition) {
return "value2";
}
return ' ';
},
set(value:string) {
this.background = value;
this.classroomBackground = value;
},
},
},
I tried to achieve the following within the computed get:
this.classroomBackground = 'somevalue1';
return this.classroomBackground;
I am encountering an eslint error:
unexpected side effect in "background" computed property
In the post method, I am sending the data from the computed value.
methods: {
async onSaveClickSave() {
try {
const settings = {
classroomBackground: this.background,
};
await axios.post<{ api }>('api');
} catch (e) {
handleAxiosError(e);
}
}
After saving the value, when I attempt to retrieve the data, it does not appear in my input box.
async created() {
try {
const settingsResponse = await axios.get<{ api }>('api');
const { settings } = settingsResponse.data;
this.background = settings.classroomBackground;
//this.classroomBackground = settings.classroomBackground;
} catch (e) {
handleAxiosError(e);
}
}
This is part of my template:
<div class="d-flex">
<VTextField
v-model="background"
>
</VTextField>
</div>
This is a partial section of the sandbox link where you can understand more about the computed part. Later, I had to add some conditions based on the value of a dropdown: https://codesandbox.io/s/clever-platform-dyrv7?file=/src/App.vue
While trying to restore the data in computed, I receive this error: upon trying to restore the data, I encounter this error in computed
Error in v-on handler: RangeError: Maximum call stack size exceededI aim to store the computed value in a data property and later restore and update it by emptying the entire string retrieved from the database.
How can I access the computed value in created during the GET request? How can this be achieved?