我创建了一个带有复选框的用户页面，但遇到了一些问题：
1.重新加载后无法看到页面上的复选框，
1.我无法取消选中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>

UI未显示现有权限，但当我单击“编辑”并选择新复选框时，UI显示选中的复选框，并且当我取消选中复选框时，它仍会推送值，从而产生重复的选中值：

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