VueJs 2: сопоставить выбранные дочерние флажки с родительским

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>

Возможно, мне нужно использовать вычисляемое свойство или метод наблюдения, но я новичок в 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

Лучший способ для синхронизации объекта от дочернего до прямого родителя - использовать модификатор .sync.Подробнее здесь .

Answer 2

Это должно сработать

<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 Свойство data "checked_roles_with_role_name" должно содержать выбранную роль и имена их ролей