Issue with Validation in Checkbox Group Implementation

[zaidchauhan]

What happened?

I am attempting to create a wrapper component (CheckboxGroup) to group checkboxes with the same name and treat them as a single unit. The issue I'm encountering is that validation does not trigger on value change, likely because the child checkboxes and the group share the same name.

Is there a way to make this work, or is there a more effective approach to achieve this goal?

View the issue on StackBlitz

Reproduction steps

...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-issue-template-fygtva?file=src%2Fcomponents%2FCheckboxGroup.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

You have the right idea with provide/inject, at the moment vee-validate doesn't offer much to help you to build a checkbox group component.

But you can use provide to pass along handleChange and setValue and whatever you need in each individual Checkbox item and have them use the injected context to add/remove their values.

I suppose we can expose vee-validate internal functions that may help you do these operations but It is very doable user-land.