Haciendo clic en el icono: (Sidebar.vue)
<i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i>Me gustaría alternar las clases de los elementos que están en otros componentes:
methods: { toggleMenu() { document.querySelector(".header").classList.toggle("changeWidth"); document.querySelector(".footer").classList.toggle("changeWidth"); document.querySelector("#app-content").classList.toggle("addOpacity"); document.querySelector(".main-content").classList.toggle("main-content_move-left"); } }¿Puedo hacerlo de otra manera usando instrumentos Vue?
La idea principal es usar un marco como Vue para administrar el estado de su aplicación, creo que está siguiendo un camino antiguo tratando de apuntar a los elementos DOM y la idea es verificar los cambios reactivos que tiene en su aplicación.
Te recomiendo que leas más sobre Vue y cómo funciona, pero una idea básica es:
Comunicación entre padres e hijos:
En este tipo de comunicación, un padre pasa los datos al hijo agregando un argumento en la declaración del componente. Esos se llaman accesorios.
<template> <div> <Car color="green" /> </div> </template>Los accesorios son unidireccionales: de padres a hijos. Cada vez que el padre cambia la propiedad, el nuevo valor se envía al hijo y se vuelve a representar.
Lo contrario no es cierto, y nunca debe mutar un accesorio dentro del componente secundario.
Comunicación niño a padre
En este tipo de comunicación, los Eventos aseguran la comunicación de niño a padre.
<script> export default { name: 'Car', methods: { handleClick: function() { this.$emit('clickedSomething') } } } </script>El padre puede interceptar esto usando la directiva v-on al incluir el componente en su plantilla:
<template> <div> <Car v-on:clickedSomething="handleClickInParent" /> <!-- or --> <Car @clickedSomething="handleClickInParent" /> </div> </template> <script> export default { name: 'App', methods: { handleClickInParent: function() { //... } } } </script>Entonces, siguiendo ese concepto, podrá representar sus componentes en función de ciertos valores, por ejemplo, utilizando la directiva v-if
<h1 v-if="showHeader">Show your header</h1> <h1 v-else>Show something else</h1>Siguiendo esta idea, podrá alternar los elementos que desee.