Using plain JS in Vue.js Component

Question

So, I want to create a navbar and rather than re-invent the wheel, I am using some public code to speed up my MVP dev.

Essentially, I am using this nav-bar code - https://codepen.io/PaulVanO/pen/GgGeyE.

But I am not sure of how I can implement jquery part within my Vue code (I have made a component, copied over html and css, now just need to integrate the jquery functionality within it.)

Here is the Jquery code I need to integrate.

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

It would be really thankful if anyone could help me accomplish with this.

Do you want to put this script inside <script> tag of the component? — Yom T.
– Yom T., Commented Feb 13, 2019 at 16:39
Can you provide us with the code of the component you created? Than I can help you to toggle the navbar. — mava
– mava, Commented Feb 13, 2019 at 16:40

tony19 · Accepted Answer · 2022-07-15 22:28:27Z

3

Assuming you have your markup (html and css) as part of one component, getting the toggle to add/remove a class would be really simple, you just need to have a method toggle the active state and a data property to keep the data. An example would be better, so here it goes.
In your component object:

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

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

In your markup you need this

<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>

That should get you going, just note i used the shorthand form for v-on and for v-bind

EDIT: Here's also a link to an updated pen with the whole example

edited Jul 15, 2022 at 22:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 13, 2019 at 20:14

Jose Elias Vargas Lebreault

1681 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KJParker Over a year ago

Man, you are the best!! Worked like a charm

Collectives™ on Stack Overflow

Using plain JS in Vue.js Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related