Vue.js复选框异常求助：页面重载状态丢失+无法取消勾选

• 页面重载后，已勾选的复选框状态无法显示
• 在EditForm中无法取消勾选，点击复选框时，即便值已存在于数组中仍会重复添加

现有代码 #

脚本代码 #

isChecked(teamPermission) {
    let checkStatus = this.currentTeam.permissions.some((permission) => {
        return teamPermission.id === permission.permissionType;
    });

    return checkStatus;
},

newPermission(permission) {
    // console.log("NewPermission", permission);
 
    this.currentTeam.permissions.push({
        permissionType:permission.id,
        teamId:this.currentTeam.id
    })

    this.newAssignedPermissions = this.currentTeam.permissions;
    // console.log('ASSIGNED PERMISSIONS', assignedPermissions)
    // console.log('NEW ASSIGNED PERMISSIONS', this.newAssignedPermissions);

    return this.newAssignedPermissions;
},

复选框列表模板 #

<ul
  v-for="permission in permissions"
  :key="permission.id"
>
  <input
    class="form-check-input mt-0"
    type="checkbox"
    :id="permission.id"
    :value="{ permissionType: permission.id }"
    :checked="isChecked(permission)"
    @input="newPermission(permission)"
    aria-label="Checkbox for following text input"
  />

  <label
    :for="permission.id"
    class="ms-2"
  >
    {{ permission.name.toLowerCase() }}
  </label>
</ul>

已选权限显示模板 #

<li
  v-for="givenPermissions in newAssignedPermissions"
  :key="givenPermissions.id"
>
  {{ permissions[givenPermissions.permissionType - 1].name.toLowerCase() }}
</li>

UI异常表现 #

• 页面加载后现有权限未显示为勾选状态
• 勾选新复选框后UI能显示已选，但取消勾选时仍会重复添加值到数组中

解决方案 #

1. 修复页面重载后复选框状态不显示问题 #

核心是确保权限数据加载完成后同步复选框状态，推荐用v-model绑定数组实现双向绑定，比手动判断更可靠：

修改复选框模板

<input
  class="form-check-input mt-0"
  type="checkbox"
  :id="permission.id"
  :value="permission.id"
  v-model="selectedPermissionIds"
  aria-label="Checkbox for following text input"
/>

脚本中初始化状态

data() {
  return {
    selectedPermissionIds: []
  }
},
mounted() {
  // 确保currentTeam数据加载完成后执行
  this.selectedPermissionIds = this.currentTeam.permissions.map(p => p.permissionType);
}

2. 修复无法取消勾选及重复添加问题 #

原方法仅处理添加逻辑，需补充移除判断，可结合复选框的checked状态来操作：

修改复选框事件绑定

<input
  class="form-check-input mt-0"
  type="checkbox"
  :id="permission.id"
  :value="{ permissionType: permission.id }"
  :checked="isChecked(permission)"
  @input="(e) => newPermission(permission, e.target.checked)"
  aria-label="Checkbox for following text input"
/>

更新newPermission方法

newPermission(permission, checked) {
  const permissionExists = this.currentTeam.permissions.some(p => p.permissionType === permission.id);
  
  if (checked && !permissionExists) {
    // 勾选且权限不存在时添加
    this.currentTeam.permissions.push({
      permissionType: permission.id,
      teamId: this.currentTeam.id
    });
  } else if (!checked && permissionExists) {
    // 取消勾选且权限存在时移除
    this.currentTeam.permissions = this.currentTeam.permissions.filter(p => p.permissionType !== permission.id);
  }
  
  // 同步显示用数组，避免引用导致的视图不更新
  this.newAssignedPermissions = [...this.currentTeam.permissions];
}

3. 修复已选权限显示异常问题 #

优化key值和权限名称获取逻辑，避免索引越界：

<li
  v-for="givenPermission in newAssignedPermissions"
  :key="givenPermission.permissionType"
>
  {{ permissions.find(p => p.id === givenPermission.permissionType)?.name.toLowerCase() || '' }}
</li>

内容的提问来源于stack exchange，提问作者Mr. A