我正在将 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)