如何在Vue.js 2中根据具体值设置复选框的勾选状态？

我来给你捋捋这个问题的解决思路，其实在Vue里控制复选框的勾选状态很直观，结合你的数据结构，分几步来就行：

首先得确保我们有清晰的匹配标识——角色ID，这是判断用户是否拥有该角色的核心依据。下面分两种常见的后端返回数据情况来处理：

情况1：后端返回的userInfo.roles是对象数组（每个角色包含id和name等字段） #

这种情况我们可以先把用户已拥有的角色ID提取成一个单独的数组，方便后续Vue自动处理勾选状态：

1. 新增数据属性 #

在你的data里加一个专门存用户角色ID的数组：

data: {
  // ...
  userRoleIds: [], // 新增：存用户已拥有的角色ID
  allRoles: [],
  userInfo: { /* ... */ },
  // ...
}

2. 处理接口返回的数据 #

在getUserInfo的then回调里，把用户角色的ID提取出来赋值给userRoleIds：

getUserInfo(user_id) { 
  this.infoLoading = true; 
  axios.get(`/api/users/info/${user_id}`) 
    .then(response => {
      this.userInfo = response.data;
      // 提取用户已拥有的角色ID到数组
      this.userRoleIds = this.userInfo.roles.map(role => role.id);
      this.infoLoading = false;
    })
    .catch(error => {
      // 处理错误
      this.infoLoading = false;
    })
}

3. 模板里渲染复选框 #

用v-for遍历allRoles，然后通过v-model绑定userRoleIds，Vue会自动帮我们处理勾选状态——数组里存在的角色ID对应的复选框会被勾选，勾选/取消时也会自动更新数组：

<div v-for="role in allRoles" :key="role.id" class="role-item">
  <input 
    type="checkbox" 
    :id="`role-${role.id}`"
    :value="role.id" 
    v-model="userRoleIds"
  >
  <label :for="`role-${role.id}`">{{ role.name }}</label>
</div>

情况2：后端返回的userInfo.roles直接是角色ID数组 #

这种情况更简单，不需要额外处理数组，直接把v-model绑定到userInfo.roles就行：

<div v-for="role in allRoles" :key="role.id" class="role-item">
  <input 
    type="checkbox" 
    :id="`role-${role.id}`"
    :value="role.id" 
    v-model="userInfo.roles"
  >
  <label :for="`role-${role.id}`">{{ role.name }}</label>
</div>

手动控制勾选状态（不用v-model的场景） #

如果因为某些原因不想用v-model，也可以通过:checked属性手动判断，同时监听change事件来维护用户的角色列表：

<div v-for="role in allRoles" :key="role.id" class="role-item">
  <input 
    type="checkbox" 
    :id="`role-${role.id}`"
    :value="role.id" 
    :checked="userInfo.roles.some(userRole => userRole.id === role.id)"
    @change="handleRoleToggle(role, $event)"
  >
  <label :for="`role-${role.id}`">{{ role.name }}</label>
</div>

然后在methods里添加处理方法：

methods: {
  handleRoleToggle(role, event) {
    const isChecked = event.target.checked;
    const roleIndex = this.userInfo.roles.findIndex(r => r.id === role.id);
    
    if (isChecked && roleIndex === -1) {
      // 勾选时添加角色
      this.userInfo.roles.push(role);
    } else if (!isChecked && roleIndex !== -1) {
      // 取消勾选时移除角色
      this.userInfo.roles.splice(roleIndex, 1);
    }
  }
}

权限复选框的处理逻辑 #

权限的控制和角色完全一致，只需要把allRoles换成allPermissions，userRoleIds换成userPermissionIds（或者直接用userInfo.permissions），重复上面的步骤就行。

内容的提问来源于stack exchange，提问作者Камилов Тимур