Vuetify擴展面板主體在測試環境中沒有顯示任何樣式

Question

您好，我目前無法在測試站點上調試問題，發生的事情是由於某些樣式屬性附加到v-expansion-panel__body的div元素而導致擴展面板未顯示。 這在我本地沒有發生。 兩者都在構建應用程序時執行npm run build 。

以下是我的代碼

模板

<v-expansion-panel
                    light
                    class="elevation-0">
                    <v-expansion-panel-content
                        v-for="(acl, moduleIndex) in aclModuleAndActionItems"
                        :key="moduleIndex">
                        <template v-slot:header>
                            <div>
                                <h3>
                                    {{acl.module_name}}
                                </h3>
                            </div>
                        </template>
                        <v-card
                            flat 
                            class="elevation-0">
                            <v-card-text class="pa-0">
                                <div 
                                    v-for="(action, actionIndex) in acl.action_names" 
                                    :key="actionIndex">
                                    <div class="pl-5">
                                        <v-checkbox
                                            :disabled="!role"
                                            :label="action | underscoretospace"
                                            color="green"
                                            class="pt-2 pb-2 pl-5 pr-4"
                                            @change="validateAclRole($event, role, acl.module_name, action)">
                                        </v-checkbox>
                                    </div>
                                    <v-divider v-if="actionIndex < (acl.action_names.length - 1)"></v-divider>
                                </div>
                            </v-card-text>
                        </v-card>
                    </v-expansion-panel-content>
                </v-expansion-panel>

腳本

<script>
import { AclModuleAndActionItems } from '~/static/AclModuleAndActionItems.js'

export default {
    data() {
        return {
            aclModuleAndActionItems: ( AclModuleAndActionItems ) ? AclModuleAndActionItems : [],
            role: ''
        }
    }
}
</script>

ACL陣列

export const AclModuleAndActionItems =  [
    {
        "module_name": "acl",
        "action_names": [
            "create",
            "destroy",
            "edit",
            "index",
            "show",
            "store",
            "update"
        ]
    },
    {
        "module_name": "projects",
        "action_names": [
            "create",
            "destroy",
            "edit",
            "index",
            "show",
            "store",
            "update"
        ]
    },
    {
        "module_name": "tasks",
        "action_names": [
            "create",
            "destroy",
            "edit",
            "index",
            "pending_task",
            "show",
            "store",
            "update"
        ]
    }
]

在我的本地顯示

Answer 1

最終使用以下代碼作為面板標題，並且樣式屬性不再添加到擴展面板標題中。

<div slot="header">
    <h3>{{acl.module_name}}</h3>
</div>

不知道為什么在我的情況下使用模板添加樣式屬性

<template v-slot:header>
    <div>
        <h3>{{acl.module_name}}</h3>
    </div>
</template>