How to optimize style code in Vue template?

Question

JavaScript

I use Vue with vue-loader - I like everything, but I don’t like the conditional style syntax used by me in the template (mega-poor), tell me how can this be done more elegantly?

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

If someone does not understand, then we are talking about this line

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

Thanks in advance to those who respond.
PS BEM-like writing is just a habit (it's convenient for me to read this), I understand perfectly well that with css modules it makes no sense. I just warn the guys who do not have an answer to my question, but have a lack of communication.

Answer 1

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