vue.js - Vuetify 扩展面板

Question

我正在使用 vuetify 和 vuejs。我有 4 个扩展面板，它们对齐两列和两行。我需要的是，当您单击其中一个时，其余 3 个消失，并且单击的那个会填满它们所在的整个容器。如果你有办法实现这个而不是 vuetify 那也很好，尽管我更喜欢 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>

Answer 1

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