Vaadin Fusion CheckboxGroup绑定Java集合字段报length读取错误问题

错误原因 #

• Vaadin CheckboxGroup组件的value属性只接收数组类型的值，内部实现中会直接读取该值的length属性计算选中状态，当值为undefined或null时就会触发该类型错误。
• 两个操作会触发该问题：
  1. 点击复选框修改值时，若绑定的roles字段初始没有设置默认值，值变更后Binder可能将空选中状态赋值为undefined而非空数组
  2. 取消选中表格行时，调用binder.clear()会将未设置默认值的集合类型字段重置为undefined，直接传给CheckboxGroup就触发报错

解决方案 #

可以任选以下一种方式修复：

1. 绑定字段时指定默认值
   在field绑定配置中添加defaultValue属性，直接指定空数组为默认值：

<vaadin-checkbox-group
  .label="${translate("users.roles")}"
  ...="${field(this.binder.model.roles, { defaultValue: [] })}"
  theme="vertical"
>

这种方式最简便，会自动把undefined、null都转换为空数组传给组件，组件返回的空选中状态也会保持为空数组而非undefined。

2. 修改TS模型的初始值
   如果UserModel是手动定义的，直接将roles字段的初始值设置为空数组：

class UserModel {
  username: string = '';
  roles: string[] = []; // 初始值设为空数组
}

如果是Vaadin代码生成工具自动生成的模型，可以在Java实体类的roles字段上加注解配置默认值，或者在生成后手动覆写该字段的初始值。

3. 清空Binder时手动赋值空数组
   如果是取消选中表格行调用binder.clear()后触发的报错，可以在调用clear之后手动给roles字段赋值空数组：

this.binder.clear();
this.binder.value.roles = [];

内容的提问来源于stack exchange，提问作者Roman