>

vuteify와 vuejs를 사용하고 있습니다. 두 개의 열과 두 개의 행으로 정렬 된 4 개의 확장 패널이 있습니다. 내가 필요로하는 것은 나머지 하나를 클릭하면 나머지 3 개가 사라지고 클릭 한 것이 위치한 컨테이너 전체를 채우는 것입니다. id가 vuetify를 선호하지만 vuetify가 아닌 것을 달성하는 방법이 있다면 괜찮습니다

단어 :

<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>

  • 답변 # 1

    실수로 v-flex 컨테이너를 행으로 사용하고 있습니다. 문서에 따라 이것은 flex: 1 1 auto 를 설정합니다 따라서 v-flex에 DOM 요소가있는 것처럼 항상 행에 많은 요소가 있습니다. 각 요소를 v-flex로 감싸고 메서드와 계산 된 값을 사용하면 작업을 수행 할 수 있습니다. 다음은 작업을 수행하기 위해 미세 조정할 수있는 작은 코드 펜입니다.

  • 이전 css - 알 수없는 동적 높이에서 수직으로 div를 가운데에 배치하는 방법은 무엇입니까?
  • 다음 javascript - Reactjs 컴포넌트 나누기