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

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

• javascript
• vue.js
• vuetify.js

• Are the permissions supposed to be applicable to each menu item? If yes, use props.item on the permissions as well. Eg. v-model="props.item.permissions.add – OJ Raqueño Commented Feb 22, 2019 at 5:22
• yes each menu item has his own permissions – Athmane Commented Feb 22, 2019 at 6:17

2 Answers 2

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

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

<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