1

Este el mi código que quiero pasar a Javascript, ya que Vue no usa DOM, se que document lo remplazare con un "mounted( )"

Código.:

$(document).ready(function () { 
   $('#sidebarCollapse').on('click', function () {  
      $('#sidebar').toggleClass('active'); 
   }); 
});

Ayuda 😥, ya probé instalando JQuery por npm pero se adueña de manera global en todo el proyecto, y solo quiero usarlo en un componente

2
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Y que hace este codigo? tal vez es mas facil hacerlo sin copiar el codigo, solamente sabiendo que hace?
    – gbianchi
    Commented el 30 nov. 2018 a las 15:53
  • Por que necesitas jquery? eso lo puedes manejar desde vue en el evento clic del elemento @click= toggleSideBar=!toggleSideBar por ejemplo y luego con v-show=toggleSideBar manejas la visibilidad.
    – Jjcc
    Commented el 30 nov. 2018 a las 16:13

1 respuesta 1

1

Con Vue lo puedes hacer de una manera muy sencilla. No necesitas jQuery. Si estás archivos .vue lo que necesitas es algo así:

`

<template>
   <div class="sidebar" v-class="{ active: isNavBarActive }"></div>
   <button @click="isNavBarActive = !isNavBarActive"></button>
</template>

`

`

export default {
  data() {
    return {
      isNavBarActive: false
    }
  }
}

`

La directiva v-class coloca una clase según una sentencia. En este caso si isNavBarActive es true entones coloca la clase active y si es false la quita. Y con en el @click estamos haciéndole un toggle a esa variable.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.