My form in Vue is almost complete, but I'm facing an issue with an array that seems to be affecting my Vue.data object directly. Here's the situation:
In my code, I have a method called getParams() which returns an object containing all the data I need to submit. Another method, sanitizeParams(), processes this data and makes some changes before submitting it through AJAX.
The problem arises when dealing with a checkbox selection for bioinformatics, which includes an option for "Other". When this option is selected, it opens an input box for the user to provide custom text. My goal is to remove 'other' from the params.data.bioinformatics array and replace it with Vue.data.bioinformaticsOther.
However, what I've noticed is that when params.bioinformatics.splice is executed, both arrays—this.bioinformatics and params.bioinformatics—are being modified simultaneously. This unexpected behavior is causing issues with my UI because the value stored by Vue no longer matches the intended 'other' option.
I initially had these functions as computed properties, but switched them to methods to troubleshoot, yet the problem persists (hence seeking help). I'm relatively new to Vue and JavaScript, so apologies if this is a basic mistake. The confusion has left me stumped for quite some time now, especially considering other non-array options work flawlessly using the same approach.
If needed, I can provide more details to clarify the scenario further.
EDIT: I have added console.log statements to the code for better clarity and corrected a variable name mentioned in the description.