[Vuejs]-Javascript method document.querySelector alternative in VueJs for optimization

by

0👍

Try with class binding:

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>

0👍

The solution that i’ve foud is to use the store because the parent isnt direct :

In the child component instead to use document.querySelector,

document.querySelector('.mc-layer__content').classList.remove('disable-scroll')

i’ve used :

this.$store.dispatch('app/disableScroll')

And in the parent, i’ve add the dynamic class :

:class="{ 'disable-scroll': isDisabled }"

The variable isDisabled has been managed in the store with disableScroll variable like this:

disableScroll(state) {
      state.disableScroll = true
    },
    enableScroll(state) {
      state.disableScroll = false
    },

Leave a comment