小编Ath*_*ane的帖子

如何在 v-datatable 中使用 v-switches v-model 和动态数组

我正在将 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>
Run Code Online (Sandbox Code Playgroud)

permissions数组是我v-model用于开关的东西。

<script>
export default {
    data() {
        return {

            Menus: [],

            Menuheaders: [
              { text: 'Show', value: 'show' },
              {
                text: 'Name',
                align: 'left',
                sortable: false, …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuetify.js

5
推荐指数
1
解决办法
2249
查看次数

标签 统计

javascript ×1

vue.js ×1

vuetify.js ×1