[vue] :class on <ion-button> erases ionic's classes

Ionic Framework
1

Hey all,
I was trying the following code to have a class binding on an ion-button component directly. ion-button adds some classes by itself that get erased by vue’s :class binding.
Am I missing something?

<ion-button :class="{ 'control--active': isActive }">
    <ion-icon slot="icon-only" name="volume-high"></ion-icon>
</ion-button>

^ when isActive is false the ion-button looks like this in the DOM:

<ion-button ion-activatable class="button button-md button-clear button-clear-md hydrated activated" fill="clear">

^ when isActive is true the ion-butto looks like this in the DOM

<ion-button class="navbar-music-control--active" ion-activatable fill="clear">

I guess for now it needs to be wrapped or is there a convenient, nice solution to that?
Cheers

2

Looks like there is some weird async initialization gap between Vue’s directive :class and <ion-button> which results in Vue erasing existing classes.

solved it now with using a separate directive for :class use cases with this custom directive v-toggleClass for now.