Here is an object I am working with:
rightGroups: [
{
name: "Admin Rights",
id: 1,
rights: [
{
caption: 'Manage Rights',
name: 'reports',
right: false,
id: 1
},
{
caption: 'Right X',
name: 'admin.rightX',
right: false,
id: 2
},
{
caption: 'Right Y',
name: 'admin.rightY',
right: false,
id: 3
},
{
caption: 'Right Z',
name: 'admin.rightZ',
right: false,
id: 4
}
]
},
{
name: "User Management Rights",
id: 2,
rights: [
{
caption: 'Manage Users',
name: 'user.recht',
right: false,
id: 1
},
{
caption: 'Right X',
name: 'user.rightX',
right: false,
id: 2
},
{
caption: 'Right Y',
name: 'user.rightY',
right: false,
id: 3
},
{
caption: 'Right Z',
name: 'user.rightZ',
right: false,
id: 4
}
]
}
],
I want to display dynamic loaded checkbox groups like in this example: checkbox groups
Each checkbox group should have their own checkboxes loaded only. I am trying to achieve this using v-for in bootstrap-vue as shown below:
<b-row class="mt-5">
<b-col
v-for="group in rightGroups"
:key="group.id"
md="6"
>
<b-card
border-variant="dark"
>
<template v-slot:header>
<b-form-checkbox>
<strong>{{ group.name }}</strong>
</b-form-checkbox>
</template>
<b-form-checkbox
v-for="right in group"
:key="right.id"
>
</b-form-checkbox>
</b-card>
</b-col>
</b-row>
I only want the rights to be loaded within their respective groups. How can I accomplish this?
I have created a codesandbox for reference: https://codesandbox.io/s/thirsty-snowflake-2q4l0?file=/src/components/Rights.vue