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

Question

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

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

Answer 1

try this code. after fetching data map each permission with each menu item.

[https://codepen.io/anon/pen/daBMaX?editors=1010]

Answer 2

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
  >
    <template v-slot:top>
      <v-switch
        v-model="singleSelect"
        label="Single select"
        class="pa-3"
      ></v-switch>
    </template>
  </v-data-table>

For this kind of cases, there is single-select for Vuetify data-table