Question

我有多个角色及其权限（复选框）。因此，现在当我从角色中选择一些权限时，我需要将这些权限映射到与其角色相关联。

结果：在这里，我得到了选中的复选框，但是我还需要将角色映射为键

[ { "perm_id": 2, "perm_name": "Update" }, { "perm_id": 1, "perm_name": "Create" } ]

new Vue({
  el: '#app',
  data: {
   	checked_roles: [],
    roles: [
      {
      	"role_id" : 1,
        "role_name" : 'Administrator',
        "perms" : [
        	{
          	"perm_id" : 1,
            "perm_name" : 'Create'
          },
          {
          	"perm_id" : 2,
            'perm_name' : 'Update'
          },
          {
          	"perm_id" : 3,
            'perm_name' : 'Delete'
          }
        ]
      },
      {
      	"role_id" : 2,
        "role_name" : 'Moderator',
        "perms" : [
        	{
          	"perm_id" : 1,
            "perm_name" : 'Create'
          },
          {
          	"perm_id" : 2,
            'perm_name' : 'Update'
          },
          {
          	"perm_id" : 3,
            'perm_name' : 'Delete'
          }
        ]
      }
    ]
  }
})

.role-row {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="role in roles" class="role-row">
    <label>{{role.role_name}}</label>
    <hr>
    <div v-for="perm in role.perms">
      <input type="checkbox" :value="perm" v-model="checked_roles"> {{ perm.perm_name }}
    </div>
  </div>
  
  <p>Selected roles and perms</p>
  {{checked_roles}}
</div>

可能我必须使用计算属性或watch方法，但是我是VueJ中的新手，因此我尝试了多次以解决此问题，但没有结果。

应该返回role []对象，但仅带有选中的复选框。就是这样。

// checked for example:
[
    {"role_id" : 1,"role_name" : 'Administrator',"perms" : [{"perm_id" : 1,"perm_name" : 'Create'}, {"perm_id" : 2,'perm_name' : 'Update'}]},
    {"role_id" : 2,"role_name" : 'Moderator',"perms" : [{"perm_id" : 1,"perm_name" : 'Create'}]}
]

Answer 1

这应该有效

<template>
<div>
    <div id="app">
        <div v-for="role in roles" class="role-row">
            <label>{{role.role_name}}</label>
            <hr>
            <div v-for="(perm,index) in role.perms">
                <input type="checkbox" @change="getRole(role,index)" :value="perm"  v-model="checked_roles"> {{ perm.perm_name }}
            </div>
        </div>

        <p>Selected roles and perms</p>
        {{checked_roles}}
    </div>
</div>

 data: {
        checked_roles: [],
        checked_roles_with_role_name: [],
        roles: [
            {
                "role_id" : 1,
                "role_name" : 'Administrator',
                "perms" : [
                    {
                        "perm_id" : 1,
                        "perm_name" : 'Create'
                    },
                    {
                        "perm_id" : 2,
                        'perm_name' : 'Update'
                    },
                    {
                        "perm_id" : 3,
                        'perm_name' : 'Delete'
                    }
                ]
            },
            {
                "role_id" : 2,
                "role_name" : 'Moderator',
                "perms" : [
                    {
                        "perm_id" : 1,
                        "perm_name" : 'Create'
                    },
                    {
                        "perm_id" : 2,
                        'perm_name' : 'Update'
                    },
                    {
                        "perm_id" : 3,
                        'perm_name' : 'Delete'
                    }
                ]
            }
        ]
    },
    methods:{
        getRole(role,index){
            this.checked_roles_with_role_name={checked_roles:this.checked_roles,role_name:role.role_name}
        }
    }

SO“ checked_roles_with_role_name”数据属性应包含所选角色及其角色名称

Answer 2

将对象从子对象同步到直接父对象的最佳技术是使用.sync修饰符。更多信息here。

VueJs 2：将选定的子复选框与父项映射

2 个答案: