VueJS is the framework I am currently working with and I am attempting to utilize v-model to link checkboxes to values stored within an object:
jobsChecked: {Baker: false, Cook: false, Miner: false} // etc...
Here is the checkbox element setup:
<div class="checkbox jobs" v-for="j in jobs" :key="j">
<label>
<input type="checkbox" v-model="filters.jobsChecked.j"
@change="filterJobs(j)"> {{ j }}
</label>
</div>
The function filterJobs() is triggered each time I click on one of these checkboxes:
filterJobs(j) {
if (!this.filters.jobs.includes(j)) {
this.filters.jobs.push(j);
this.filters.jobsChecked[j] = true;
} else {
const index = (ele) => ele === j;
const remove = this.filters.jobs.findIndex(index);
this.filters.jobs.splice(remove, 1);
this.filters.jobsChecked[j] = false;
}
console.log("jobs filters: ", this.filters.jobs);
console.log("jobs checked: ", this.filters.jobsChecked);
}
Expected result: The function takes in "j" which represents the string "Baker". The syntax for modifying an object's property functions correctly, pushing "Baker" to the filters.jobs array, and setting filters.jobsChecked.j to make filters.jobsChecked.Baker = true
Actual result: The function interprets "j" as the string "Baker", adds "Baker" to the filters.jobs array, but incorrectly adds the key/value pair 'j: true' to filters.jobsChecked.
I am puzzled because the function seems to understand that 'j' is actually a variable with the value of "Baker", so it should recognize that "filters.jobsChecked.j" = "filters.jobsChecked.Baker" and update the value to true using object modification syntax.
I have researched extensively about this issue but have not found a clear explanation. Based on my understanding, I am implementing it correctly and utilizing [] square brackets since it is a variable being passed in. I also attempted ['j'] but this simply added the key value "j: false" to the object...
What am I overlooking? I suspect it might be something incredibly obvious...