Vue.js Vuetify扩展面板

我正在使用vuetify和vuejs。我有4个扩展面板，两列两行对齐。我需要的是，当你点击其中一个时，剩下的3个图标就会出现，点击的图标会填满它们所在的整个容器。 如果你有一种不是vuetify的方法，那也不错，不过我更喜欢vuetify

Html:

标题
内容在这里
标题
内容在这里
标题
内容在这里
标题
内容在这里

脚本是：

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

var mainContent=新的Vue({
el:“#主要内容”，
数据：{
伊希登：错
}
})  

您犯的错误是使用v-flex容器作为行。根据这一设置，flex:1自动，因此行中的元素数量始终与v-flex中的DOM元素数量相同。如果用v-flex包装每个元素，并使用方法和计算值，我相信您的任务是可以实现的。这里有一个小提示，您可以微调以完成任务

让我试试看

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