How makers stay productive

Avoiding v-model was an interesting departure to got me diving deeper into how Vue really works. In the end, it wasn't about all the fancy schmancy Javascript tricks of adding event listeners forEach checkbox and using the @change handler to track clicks on checkboxes and update the variable array accordingly with the right checkbox values.

I just needed 2 things:
- a way to fetch data on existing goals associated with a post, and to add ticks the respective checkboxes based on that fetched data
- a way to query (using querySelectorAll) the checked status of all the checkboxes on clicking Submit to update.


computed: {
checkedGoals() {
const ret = {}
for (let i = 0; i < this.selectGoals.length; i++) {
for (let j = 0; j < this.post.goals.length; j++) {
if (this.post.goals[j].id === this.selectGoals[i].id) {
ret[this.post.goals[j].id] = true
}
}
}
return ret
},
}

methods: {
listenChecked() {
const checkboxes = document.querySelectorAll(
'input[type=checkbox][name=selectedGoalInputs]'
)
let checkedArr = []
checkedArr = Array.from(checkboxes)
.filter((i) => i.checked)
.map((i) => i.value)
this.newGoals = checkedArr
}
}
// and then add this function to the updatePost function to use the this.newGoals data in the request body

Ref:
https://forum.vuejs.org/t/check-checkboxes-on-array-values/46631/2
https://stackoverflow.com/a/14544545