Element Plus复选框初始选中后无法取消选中问题求助

核心问题 #

1. v-model与:checked冲突：Element Plus的el-checkbox中，v-model已经完全负责双向绑定选中状态，同时设置:checked会干扰组件内部的状态管理，导致点击后状态无法正确切换。
2. @change事件参数错误：你传递的是点击前的旧状态slotProps.action.check_control，而非复选框切换后的新状态，这会导致API请求发送的是旧值，进而页面状态无法同步更新。

修改步骤 #

1. 移除冗余的:checked绑定：只保留v-model即可实现状态的双向控制。
2. 修正@change的参数传递：直接使用事件返回的新选中状态作为参数，无需从slotProps中取值。
3. 同步状态（可选）：如果slotProps.action.check_control来自父组件的props，需要在API请求成功后同步更新该值；如果是可修改的响应式数据，v-model会自动处理，但确保数据是响应式的。

修改后的代码 #

模板部分

<el-checkbox
  v-model="slotProps.action.check_control"
  size="large"
  class="ml-4"
  :id="slotProps.action.id"
  @change="checkControl(slotProps.action.id, $event)"
/>

脚本部分

const checkControl = (id, controlled) => {
  loading.value = true
  // 直接使用事件传递的新状态转换为0/1
  const requestValue = controlled ? 1 : 0
  ApiService.postTest('api...', {
    jar_id: id,
    check_control: requestValue
  })
    .then((res) => {
      loading.value = false
      // 如果需要根据接口响应确认状态，可在此处更新slotProps.action.check_control
      // 例如：slotProps.action.check_control = res.data.check_control
    })
    .catch((e) => {
      loading.value = false
      // 请求失败时，恢复复选框状态（可选）
      slotProps.action.check_control = !controlled
      console.log(e)
    })
}

补充说明 #

• 若slotProps.action.check_control是父组件传递的props，由于Vue中props不可直接修改，需要通过emit通知父组件更新该值，或者将其转换为本地响应式变量后再绑定v-model。
• 建议在请求失败时恢复复选框状态，避免页面状态与实际接口数据不一致。

内容的提问来源于stack exchange，提问作者Yellow rain coat