Vuetify 扩展面板答案

【问题标题】：Vuetify expansion panelsVuetify 扩展面板
【发布时间】：2018-06-06 11:44:59
【问题描述】：

我正在使用 vuetify 和 vuejs。我有 4 个扩展面板，它们对齐两列和两行。我需要的是，当您单击一个时，其余 3 个消失，并且单击的一个填充了它们所在的整个容器。如果你有办法实现这一点，那不是 vuetify 也可以，尽管 id 更喜欢 vuetify

HTML：

<div id="mainContent">
    <v-app>
        <v-container>
            <v-layout row wrap>
                <v-flex xs12 lg5 mb-3>
                    <v-expansion-panel popout>
                        <v-expansion-panel-content>
                            <div slot="header" v-on:click="isHidden = !isHidden">Title</div>
                            <v-card>
                                <v-card-text>
                                    Content Goes here
                                </v-card-text>
                            </v-card>
                        </v-expansion-panel-content>
                        <v-expansion-panel-content>
                            <div slot="header" v-if="!isHidden">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                        </v-expansion-panel>
                    </v-flex>
                    <v-flex xs12 lg5 mb-3>
                        <v-expansion-panel popout>
                            <v-expansion-panel-content>
                                <div slot="header">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                            <v-expansion-panel-content>
                                <div slot="header">Title</div>
                                <v-card>
                                    <v-card-text>
                                        Content Goes here
                                    </v-card-text>
                                </v-card>
                            </v-expansion-panel-content>
                        </v-expansion-panel>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-app>
    </div>

脚本是：

<script>
    var mainContent = new Vue({
        el: '#mainContent', 
        data: {            
            isHidden : false
        }
    })  
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您所犯的错误是将 v-flex 容器用作行。根据documentation 这设置flex: 1 1 auto，所以你的行中的元素总是和你的 v-flex 中的 DOM 元素一样多。如果你用 v-flex 包装每个元素，并使用方法和计算值，我相信你的任务是可以实现的。这是一个小的codepen，您可以微调以完成任务

【讨论】：

让我试试玩那个