Vue.js嵌套v-for循环中v-if使用异常：无法展示全部权限项

根因分析 #

你当前模板的逻辑本质是仅渲染当前角色已分配的权限，未分配的权限（比如你提到的Delete user）因为不在selected数组里，根本不会被渲染出来，这是权限缺失的核心原因。

具体错误点 #

• 嵌套循环逻辑错误：外层遍历全量权限permissions，内层遍历已选权限selected，且内层父节点绑定了v-if="mission.id == per.id"，只有全量权限在已选列表中存在匹配项时才会渲染，未分配的权限直接被过滤。
• v-for与v-if同节点优先级问题：Vue中v-for优先级高于v-if，你将两个指令绑定在同一个form-group节点上，会先遍历所有已选权限再逐一匹配，性能极低且不符合需求。
• 变量名覆盖：内外层v-for使用了同名的参数key、index，内层变量会覆盖外层变量，引发未知渲染异常。
• 勾选状态冲突：input同时绑定了v-model和checked属性，二者功能重叠会导致状态控制异常。
• 无效判断逻辑：父节点已经判断mission.id == per.id才渲染，子节点的v-if="mission.id !== per.id"永远为假，属于完全无效的代码。

修复方案 #

不需要嵌套v-for，直接遍历全量权限，通过已选权限ID集合控制勾选状态即可，修正后代码如下：

模板代码

<div class="container" v-for="(mission, index) in permissions" :key="mission.id">
  <div class="form-group">
    <input 
      type="checkbox" 
      v-model="selectedIds" 
      :value="mission.id"
    >
    {{ mission.name }}
  </div>
</div>

JS代码

<script>
export default {
    data(){
        return{
            role:'',
            permissions:[],
            selected:[],
            selectedIds: [] // 存储已选权限ID数组，用于v-model绑定
        }
    },
    mounted(){
        this.showRole()
        this.getPermissions()
    },
    methods:{
        showRole(){
            this.axios.get(`/api/role/${this.$route.params.id}`).then(response=>{
                const{role ,selected}= response.data
                this.role= role
                this.selected = selected
                // 提取已选权限的ID，初始化勾选状态
                this.selectedIds = selected.map(item => item.id)
            }).catch(error=>{
                console.log(error)
            })
        },
        getPermissions(){
            this.axios.get('/api/permissions').then(response=>{
                this.permissions = response.data
            }).catch(error=>{
                console.log(error)
            })
        },
    }
}
</script>

修改后所有全量权限都会正常渲染，已分配的权限会默认勾选，提交时直接把selectedIds传给后端更新权限即可。

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