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

Question

[RaulDuke]

Использую 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 модулями в нем нет смысла. Просто предупреждаю ребят, у которых нет ответа на мой вопрос, но есть с дефицит общения.

Answer 1

[Dark Hole]

:class="[$style.layout_switcher__grid, currentLayout ? $style.__active : '']"
:class="[$style.layout_switcher__grid, {[$style.__active]: currentLayout}]"

Comments

[RaulDuke]

ох точножеж, стыдоба то какая( Спасибо!

:class="[$style.layout_switcher__list, currentLayout || $style.__active]"