• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

110
Views
Cómo apuntar al dom del elemento de otro componente por vue

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error