Использование простого JS в компоненте Vue.js

Question

Итак, я хочу создать навигационную панель и вместо того, чтобы заново изобретать колесо, я использую некоторый общедоступный код для ускорения разработки MVP.

По сути, я использую этот навигационный штрих-код -https://codepen.io/PaulVanO/pen/GgGeyE.

Но я не уверен, как я могу реализовать часть jquery в своем коде Vue (я создал компонент, скопированный через html и css, теперь просто нужно интегрировать в него функциональность jquery).

Вот код Jquery, который мне нужно интегрировать.

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

Было бы очень благодарно, если бы кто-нибудь мог помочь мне в этом.

Answer 1

Предполагая, что у вас есть разметка (html и css) как часть одного компонента, переключение для добавления / удаления класса было бы действительно простым, вам просто нужно иметь метод для переключения активного состояния и свойство данных для сохраненияданные.Пример будет лучше, так что вот так.
В вашем компоненте объекта:

{
    data() {
        return {
            isActive: false
        }
    },

    methods: {
        toggleMenu(){
            this.isActive = !this.isActive
        }
    }
}

В вашей разметке вам нужно это

<div class="button_container" id="toggle" :class="{'active': isActive}" @click="toggleMenu">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</div>
------------------------------------
<div class="overlay" id="overlay" :class="{'open': isActive}">
<nav class="overlay-menu">
  <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

ТоЕсли у вас все получится, просто обратите внимание, что я использовал сокращенную форму для v-on и для v-bind

EDIT: Вот также ссылка наобновленная ручка с целым примером