Vuetify扩展面板主体在测试环境中没有显示任何样式

Question

Hello I'm currently having trouble in debugging an issue on my testing site, what happened is that the expansion panels are not showing because of some style attribute is attached to the div element of v-expansion-panel__body . This doesn't happen on my local. Both executes npm run build in building the app.

Below are my codes

Template

<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

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

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

ACL Array

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"
        ]
    }
]

Display on my local

Answer 1

Ended up using the below code for panel headers and the style attribute is not added anymore to expansion panel header.

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

Not sure why using template is adding the style attribute in my case

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