Alright, let’s talk about my time messing around with the v-checkbox component in Vuetify. It’s one of those basic things you always need, right? A little tick box.
So, I started simple. Just needed one checkbox for a “Remember Me” kind of feature. Slapped a <v-checkbox> tag into my template. First thing, obviously, it needs to do something. So, I went into my script section, added a variable, let’s say `rememberMe`, set it to `false` initially.
Then, hooked it up using v-model="rememberMe" on the tag. That was easy enough. Clicked it, the variable became `true`. Clicked again, `false`. Okay, basic functionality, check.
But it looked weird just sitting there, no text. Found the label prop. Added label="Remember Me" to the tag. Looked much better. Now it actually told the user what they were ticking.
Handling Multiple Choices
Next project, I needed a list of options, like selecting multiple preferences. This felt a bit different. I figured I’d need an array to hold the selected values.
So, back in the script, I made an empty array, maybe called `selectedPrefs`. Then, for each preference, I added a <v-checkbox>.
Here’s the key part I had to figure out: each checkbox needed the same v-model="selectedPrefs", pointing to my array. But how did it know which preference was being ticked? That’s where the value prop came in. Each checkbox got a unique value, like value="notifications" or value="newsletter".
<v-checkbox v-model="selectedPrefs" label="Email Notifications" value="notifications"></v-checkbox><v-checkbox v-model="selectedPrefs" label="Weekly Newsletter" value="newsletter"></v-checkbox><v-checkbox v-model="selectedPrefs" label="Promo Offers" value="promos"></v-checkbox>
Tried it out. Ticking a box added its value to the selectedPrefs array. Unticking removed it. Pretty neat how that worked automatically. It took a moment to click that the `v-model` needed to be the same array for all related checkboxes, but the `value` prop was the differentiator.
Some Extra Bits
Played around with some other props too.
Needed to make one option stand out, so I used the color="primary" prop on it. Changed the little check mark and ripple effect color. Simple enough.
Then I had a case where a checkbox should be visible but not clickable until some other condition was met. The disabled prop worked perfectly. Just added :disabled="someCondition" and it greyed out as expected.
Sometimes I needed the checkbox state to be something other than `true`/`false`, maybe like `’active’`/`’inactive’`. Found the true-value and false-value props for that. You set :true-value="'active'" and :false-value="'inactive'" and bind `v-model` to a variable expecting those strings. A bit more specific, but good to know it’s there.
So yeah, that’s been my journey with v-checkbox. Started basic, figured out the array binding for multiple selections, and poked at some styling and state props. It gets the job done without too much fuss once you understand how `v-model` works differently for single toggles versus multiple selections in an array.
