如何在v-datatable中使用带有动态数组的v-switches v-model

Question

我正在将Vue.js与Vuetify一起使用，并且尝试使用v-data-table从后端加载菜单列表并使用v-switches对其设置一些权限，但是我面临着尝试v-model数组时出现问题：

<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数组是即时消息在v-model中用于开关的作用。

<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>

问题是，当我单击开关时，它们都具有相同的值

我在这里试图做的是创建新角色并在每个菜单上分配权限

Answer 1

尝试此代码。提取数据映射后，每个菜单项的每个权限。

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