@RaulDuke

Как оптимизировать код стилей в шаблоне Vue?

Использую Vue с vue-loader -- все нравится, но используемый мной условный синтаксис стилей в шаблоне мне не нравится (мегаубогий), подскажите может как то это можно реализовать элегантней?
<app-input type="button" v-on:click="currentLayout = false"
          :class="{ [$style.layout_switcher__grid]: true, [$style.__active]: !currentLayout }" >
          <span :class="$style.grid__icon"></span>
        </app-input>
        <app-input type="button" v-on:click="currentLayout = true"
          :class="{ [$style.layout_switcher__list]: true, [$style.__active]: currentLayout }">
          <span :class="$style.list__icon"></span>
        </app-input>


Если кто не понял то речь идет об этой строке
:class="{ [$style.layout_switcher__grid]: true, [$style.__active]: currentLayout }"


Заранее спасибо тем кто откликнулся.

P.S. БЭМоподобное написание просто привычка (мне удобно читать это), я отлично понимаю, что с css модулями в нем нет смысла. Просто предупреждаю ребят, у которых нет ответа на мой вопрос, но есть с дефицит общения.
  • Вопрос задан
  • 231 просмотр
Решения вопроса 1
abyrkov
@abyrkov
JavaScripter
:class="[$style.layout_switcher__grid, currentLayout ? $style.__active : '']"
:class="[$style.layout_switcher__grid, {[$style.__active]: currentLayout}]"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы