Нажмите, чтобы переключить класс

Question

Я пытаюсь создать событие щелчка, которое переключит класс для элемента HTML.

Мой HTML выглядит следующим образом:

<navigation class="navigation" v-bind:class="{'class1': class1}">

И в моем методе данных у меня есть:

            data: {
                class1: false 
            },

Однако, когда я нажимаю на элемент, ничего не происходит, я даже не получаю сообщение об ошибке в консоли.Возможно, я не включил правильную версию vueJS в свой код, чтобы использовать обработчики событий?

Вы можете увидеть здесь кодовую ручку с полным кодом: https://codepen.io/fennefoss/pen/BGOywz

Answer 1

Я понял, как решить эту проблему, используя следующий код:

<navigation id="mobile-toggle"
    v-bind:class="{ active: showMobileMenu }"
    v-on:click="showMobileMenu = !showMobileMenu">something
</navigation>

data: {
    showMobileMenu: false
},

Answer 2

Я не вижу обработчик щелчков в вашей навигации?

<navigation @click="class1 = !class1" class="navigation" v-bind:class="{'class1': class1}">

Это, например, переключит класс при нажатии.