我在嵌套循环 [vuejs] 中遇到 v-if 问题

Question

我的问题是我正在尝试编辑一个角色，所以我有两个功能，一个是恢复角色及其权限，一个是恢复所有权限。我正在尝试执行嵌套的 v-for 循环以显示所有权限并检查已选择的权限。一切正常，但由于某种原因我无法显示所有权限。还有一项名为“删除用户”的权限未显示。无论如何，问题是100%来自模板方面。

 <div class="container" v-for="(mission,key,index) in permissions" :key="key">
    <div class="form-group" v-for="(per,key,index) in selected" :key="key" v-if="mission.id == per.id">
        <input type="checkbox"  v-model="mission[key]"  checked >{{mission.name}}
        <div v-if="mission.id !== per.id">
        <input type="checkbox"  v-model="mission[key]">{{mission.name}}
        <p>fucking hell</p>
      </div>
   </div>                      
</div>

<script>
export default {
    data(){
        return{
            role:'',
            permissions:[],
            selected:[],
        }
    },
    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
            }).catch(error=>{
                console.log(error)
            })
        },
        getPermissions(){
            this.axios.get('/api/permissions').then(response=>{
                this.permissions =response.data
            }).catch(error=>{
                console.log(error)
            })
        },
    }
}
</script>

这里是API的图片，returns所有许可。你可以看到最后有删除用户。

enter image description here

Answer 1

不建议同时使用 v-if 和 v-for。查看 style guide 了解更多信息。

与v-if一起使用时，v-for的优先级高于v-if。

我在嵌套循环 [vuejs] 中遇到 v-if 问题

I am having a problem with v-if in a nested loop [vuejs]

javascript

laravel

vue.js

vue-component