Условные точки останова для Vuetify

Условные точки останова для Vuetify

16.09.2019 01:45:31 Просмотров 46 Источник

У меня есть следующий макет:

layout

Это код, который я использовал:

<template>
    <v-card>
        <v-card-text>
            <v-container grid-list-xl fluid class="py-0 mb-5">
                <v-layout row wrap>
                    <v-flex xs12 lg8>
                        <v-container class="pa-0 mb-5">
                            <v-layout>
                                <v-flex xs12 class="py-0">
                                    <v-subheader class="pa-0 mb-3">
                                        Title 1
                                    </v-subheader>
                                </v-flex>
                            </v-layout>
                            <v-layout wrap>
                                <v-flex xs12 md4 lg6>
                                    Content 1
                                </v-flex>
                                <v-flex xs12 md8 lg6>
                                    Content 2
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-flex>
                    <v-flex xs12 lg4>
                        <v-container class="pa-0">
                            <v-layout row>
                                <v-flex xs12 class="py-0">
                                    <v-subheader class="pa-0 mb-3">
                                        Title 2
                                    </v-subheader>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12>
                                    Content 3
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-card-text>
    </v-card>
</template>

Очень просто, и это работает для того,что мне нужно сделать. Однако теперь у меня есть следующая проблема... "Содержание 2" может не существовать . Когда "содержание 2" не существует, это произойдет:

enter image description here

Но я действительно хочу, чтобы это произошло:

layout

Есть ли способ контролировать точки останова? Я хотел бы как-то переключаться между lg4и lg8в зависимости от того, есть ли у меня "контент 2" или нет. Я думал о создании двух v-flexes, один с lg4и один с lg8, показывая только один или другой, но я не хочу повторять свой код и создание нового компонента также невозможно для меня.

В идеале, я хотел бы сделать что-то вроде этого:

<v-flex v-if="content2Exists" xs12 lg8>
<v-flex v-else xs12 lg4>
    Blabla...
</v-flex>
У вопроса есть решение - Посмотреть?

Ответы - Условные точки останова для Vuetify / Conditional Breakpoints for Vuetify

Является ответом!
Boussadjra Brahim

16.09.2019 01:54:38

Я думаю, что вы должны попробовать условие внутри lg(x)prop следующим образом :

  <v-flex  xs12 :lg4="!content2Exists" :lg8="content2Exists">
https://stackoverflow.com/questions/57955193/conditional-breakpoints-for-vuetify/57955337#comment102323093_57955337
Потрясающе! Работает отлично! Я даже не знал, что такое возможно. Большое спасибо!
Закрыть X