javascript - 如何在 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>

问题是当我点击开关时它们都采用相同的值

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

Answer 1

试试这段代码。获取数据后，将每个权限映射到每个菜单项。

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