Necesito optimizar mi código con todas las características de VueJs, así que cambié todo document.getElementById y document.querySelectorAll usando la referencia en VueJs
Entonces, lo único que no encontré una alternativa es cómo cambiar: document.querySelector con otro código relacionado con VueJs:
document.querySelector('.mc-layer__content').classList.add('disable-scroll')¿Hay alguna optimización relacionada con esto?
Otro punto importante, no puedo usar la referencia aquí porque la clase está en el componente principal, no en el componente, así que cuando uso this.$refs no puedo ver el elemento principal.
La solución que encontré es usar la tienda porque el padre no es directo:
En el componente secundario, en lugar de usar document.querySelector,
document.querySelector('.mc-layer__content').classList.remove('disable-scroll')he usado :
this.$store.dispatch('app/disableScroll')Y en el padre, agregué la clase dinámica:
:class="{ 'disable-scroll': isDisabled }"La variable isDisabled se ha administrado en la tienda con la variable disabledScroll de esta manera:
disableScroll(state) { state.disableScroll = true }, enableScroll(state) { state.disableScroll = false },Prueba con el enlace de clase :
new Vue({ el: "#demo", data () { return { scroll: true } } }) .disable-scroll { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <button @click="scroll = !scroll">switch</button> <div class="mc-layer__content" :class="{'disable-scroll': scroll}"> ssssss </div> </div>