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

问题描述

您好我目前在调试我的测试站点上的问题时遇到问题，发生的事情是扩展面板没有显示，因为某些样式属性附加到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"
        ]
    }
]

显示在我的本地

标签： javascripthtmlvue.jsvuejs2vuetify.js

最终将以下代码用于面板标题，并且样式属性不再添加到扩展面板标题中。

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

不知道为什么在我的情况下使用模板会添加样式属性

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

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

问题描述

解决方案

推荐阅读