[Vuejs]-Converting Jquery hide/show to Vue

by

0👍

Your question is actually more like two; Do this by using jQuery in Vue, or do this in pure Vue. Obviously it would be better to convert it to pure Vue, especially if you are only using the toggle() method, as importing the whole jQuery library for just one function is major overkill.

With jQuery Version:

To use jQuery in Vue you want to wrap in a Vue component and put v-once directive on the component so Vue leaves it alone. Then you would usually target the elements using window.jQuery.('#someid').toggle()

I distilled the panel component down to be reusable and am targeting it with the following method from within the panel component itself. 

methods:{
    toggleMe(id){
        window.jQuery('#'+id).toggle('slide');
    }
}

Here is the full working fiddle https://jsfiddle.net/skribe/cmwtqe7d/3/

No jQuery Version

It is quite easy to replicate jQuery’s toggle() method since it is only adding/removing “display:none” You would do this with Vue’s class bindings. No function even necessary in this case. Just create a hidePanel data property, write a.hideme css class, bind it to div in the template, and toggle it with hidePanel = !hidePanel with an @click event.

 <div :id='panel.pId' :class="{hideme : hidePanel}">
  <div class="panel_head"> TITLE </div>
  <div class="panel_body"> BODY </div>
</div>
<div>
  <span @click="hidePanel = !hidePanel" class="btn">
    <span id="eee"><i class="far fa-window-maximize"></i></span>
  </span>
</div>

Here is the working Jfiddle:
https://jsfiddle.net/skribe/L9mq20nd/14/

Leave a comment