☑️☑️☑️Created multi-selectable checkboxes for goals unique to user that works on POST
Wow spent 2 days figuring out how to:
1) dynamically create a list of checkboxes using v-for,
2) how to select multiple checkboxes that submits the id value of the each item, instead of a boolean true/false
3) how to use v-model so that the right data is POSTed
Went down rabbit hole between using checkboxes inside a `select` field (UI/a11y nightmare), or tweaking radio buttons to behave like multi-selectable checkboxes (impossible), or just making multiple checkboxes send an id integer instead of boolean. In the end, it was back to good ol' Vue.js docs (https://vuejs.org/v2/guide/forms.html#Checkbox) that gave the answer, Stack Overflow didn't even helped much.
Answer is: Multiple checkboxes bound to the same array, with each input's id and value being unique, while v-model is same for all. Change data definition of your v-model attribute to an array `[]` instead of a string `' '`.
Sometimes the simplest things are the hardest. 😵😓
1) dynamically create a list of checkboxes using v-for,
2) how to select multiple checkboxes that submits the id value of the each item, instead of a boolean true/false
3) how to use v-model so that the right data is POSTed
Went down rabbit hole between using checkboxes inside a `select` field (UI/a11y nightmare), or tweaking radio buttons to behave like multi-selectable checkboxes (impossible), or just making multiple checkboxes send an id integer instead of boolean. In the end, it was back to good ol' Vue.js docs (https://vuejs.org/v2/guide/forms.html#Checkbox) that gave the answer, Stack Overflow didn't even helped much.
Answer is: Multiple checkboxes bound to the same array, with each input's id and value being unique, while v-model is same for all. Change data definition of your v-model attribute to an array `[]` instead of a string `' '`.
Sometimes the simplest things are the hardest. 😵😓
