@runprogr

Почему при динамической смене класса остаются css стили?

Странная ситуация, прошу подсказать в какую сторону копать.
Есть код
<input type="checkbox" 
                    v-model="form.gameCodes"
                    name="gameCodes"
                    value="1"
                    class="game-tab__checkbox"
                    id="anyid">
<label for="anyid" class="game-tab game-tab_register" :class="{ active : form.gameCodes.includes('1') }">
</label>

Есть чекбокс, при нажатии на который его значение попадает в массив. На лейбле навешано условие, что если в массиве содержится нужное value, то ему добавляется класс active(и соотв-но меняются стили).
На десктоп версии сайта при нажатии на лейбл добавляется класс со стилями, при повторном нажатии тут же убирается класс и стили, как и должно быть.
На мобильной версии сайта при нажатии на лейбл добавляется класс со стилями, при повторном нажатии тут же убирается класс, НО стили этого класса остаются. Пока не кликнешь еще раз куда-нибудь в другое место сайта, в этот момент стили исчезают.
Почему класс удаляется, а его стили остаются ? И почему это происходит только в мобильной версии ? Что может вызывать такое поведение ?
  • Вопрос задан
  • 125 просмотров
Решения вопроса 1
@runprogr Автор вопроса
Внезапно нашел причину проблемы. В мобильной версии сайта при нажатии на элемент срабатывал :hover эффект и был активным постоянно, пока не кликнешь в другое место. Пришлось оставить hover в десктопной версии, но удалить hover эффект из стилей мобильной версии и проблема решилась.

Надеюсь кому то поможет в подобной ситуации
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы