Применение классов к определенным точкам останова в области просмотра ведет себя странно при обновлении страницы - PullRequest
Новая
       52

Применение классов к определенным точкам останова в области просмотра ведет себя странно при обновлении страницы

1 голос
/ 15 марта 2019
  • Стек: Nuxt.js + Vuetify.js
  • Проблема: установка классов в зависимости от точки останова ведет себя ненормально

  • Попытка: В ~ / components / SubComponent.vue Я хочу отображать текст крупным шрифтом на маленьких экранах и более, и раскрасить мой текст красным только на маленьких экранах: 

    <v-flex
  xs12
  sm4
  :class="{
    'display-3': $vuetify.breakpoint.smAndUp,
    'red--text': $vuetify.breakpoint.xs
  }">
  Sub component
</v-flex>

  • Вывод: Всякий раз, когда я обновить , я вижу, что текст маленький и маленький на маленьких экранах (мой ноутбук).

  • Примечание. При таком подходе я получаю странное поведение всякий раз, когда стараюсь тщательно комбинировать больше классов, но здесь я просто привожу минималистский пример.

  • Вопрос: Почему это происходит и как его преодолеть?

  • Если вам интересно, это ссылка для воспроизведения проблемы: здесь

...