Categories
javascript vue.js vuetify.js

How to use v-switches v-model with dynamic array in v-datatable

I’m using Vue.js with Vuetify and I’m trying to use v-data-table to load a list of menus from back end and set some permissions on it using v-switches but I am facing a problem while trying to v-model an array:

<v-data-table
:items="Menus"
class="elevation-1"
hide-actions
:headers="Menuheaders"
flat
>
<template slot="items" slot-scope="props">
<td><v-checkbox hide-details v-model="permissions.show" class="shrink mr-2"></v-checkbox></td>
<td>{{ props.item.name }}</td>
<td>
<v-switch
v-model="permissions.add"
></v-switch>
</td>
<td>
<v-switch
v-model="permissions.edit"
></v-switch>
</td>
<td>
<v-switch
v-model="permissions.delete"
></v-switch>
</td>
<td>
<v-switch
v-model="permissions.execute"
></v-switch>
</td>
</template>
</v-data-table>

permissions array is what im using in v-model for switches.

<script>
export default {
data() {
return {
Menus: [],
Menuheaders: [
{ text: 'Show', value: 'show' },
{
text: 'Name',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Add', value: 'add' },
{ text: 'Edit', value: 'edit' },
{ text: 'Delete', value: 'delete' },
{ text: 'Execute', value: 'execute' },
],
Roles: [],
permissions : [
{
add : false,
edit : false,
delete : false,
show : false,
execute : false,
}
]
}
},
methods : {
loadMenus(){
axios.get("api/menu").then(({data}) => (this.Menus = data))
.then(()=>{
})
.catch(()=>{
})
},
loadRoles(){
axios.get("api/role").then(({data}) => (this.Roles = data))
.then(()=>{
})
.catch(()=>{
})
}
}
}
</script>

The problem is when I click on the switches they all take the same value

Screen

what im trying to do here is creating new role and assign permissions on each menu

mcd screen