报错ERROR TypeError: .indexOf is not a function，Checkbox修改角色布尔值求助

首先，咱们来拆解一下你遇到的错误：这个报错说明你调用indexOf的对象不是字符串也不是数组，大概率是你的this.selectedUser.roles数组里的元素和你定义的模型不一致——你说模型里是字符串数组，但实际运行时可能存的是对象，导致roleEdit变成了对象，而对象没有indexOf方法，所以报错了。

先看你的代码问题 #

你的原代码里用filter(roleEdit => roleEdit.indexOf(roleName) >= 0)，如果roles是字符串数组，其实完全没必要用indexOf，直接比较字符串相等就行；如果roles是对象数组，那你应该访问对象的属性（比如roleEdit.title）来判断，而不是直接调用indexOf。

针对两种场景的解决方案 #

场景1：roles确实是字符串数组（符合你定义的User模型） #

如果你的roles是类似['admin', 'editor', 'viewer']这种字符串数组，那我们可以通过「存在则删除，不存在则添加」的逻辑实现Checkbox的切换效果：

changeRole(roleName){
  // 找到目标角色在数组中的索引
  const roleIndex = this.selectedUser.roles.findIndex(role => role === roleName);
  
  if (roleIndex !== -1) {
    // 存在该角色，移除（取消选中）
    this.selectedUser.roles.splice(roleIndex, 1);
  } else {
    // 不存在该角色，添加（选中）
    this.selectedUser.roles.push(roleName);
  }
}

场景2：roles实际是对象数组（比如带状态的角色） #

如果你的roles实际上是类似[{title: 'admin', value: true}, {title: 'editor', value: false}]的对象数组，那咱们要调整逻辑，直接切换对象的value属性：

changeRole(roleName){
  // 找到对应title的角色对象
  const roleItem = this.selectedUser.roles.find(role => role.title === roleName);
  
  if (roleItem) {
    // 切换布尔值
    roleItem.value = !roleItem.value;
  } else {
    // 没有该角色则新增，默认选中
    this.selectedUser.roles.push({ title: roleName, value: true });
  }
}

这种情况下，你需要把User模型里的roles类型改成Array<{title: string, value: boolean}>，避免类型不匹配。

快速定位问题的小技巧 #

你可以在changeRole函数开头加一行console.log(this.selectedUser.roles)，打印出数组的实际结构，就能立刻知道是字符串数组还是对象数组，方便快速调整代码~

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