Пользовательский Js в Svelte.js

Question

Добрго времени суток, пишу приложение на Svelte.js а точнее использую Sapper, питаюсь сделать что то типо флажка, Кнопка с Тогл класом,

function activeButton() {
    let e = document.querySelector(".btn-menu");
    e.classList.toggle("active");
}


<button on:click="{activeButton}" class="btn-menu">
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>

                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>

                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                </button>

Но это не работает должным образом, класс добавляется, но стили не меняются, но если я утанавлю сразу в атрибут клас Актив, тогда все работает, возможно я что-то делаю не так

Answer 1

Согласно мануалу с офф сайта, более рекомендуемым способом (svelte-way) будет прописать декларативную зависимость от флага:

<script>
let active = false;
</script>

<button on:click="{() => active = !active}" class="btn-menu" class:active> 
...
</button>

PS:

Сомневаюсь, что семантически правильно ложить все пункты меню внутри тега button

PPS:

Стоит так же проверить стили элемента через дебаг тулбар браузера, тк если класс добавлен, но стили не применились, то, вероятно, их что-то перекрывает

БЛОГ НА HUSL

Пользовательский Js в Svelte.js

Ответы (1 шт):