[Vuejs]-Uncaught TypeError: Cannot read property 'classList' of null at method

by

0👍

✅

Most all components in BootstrapVue that accepts a to prop also has the active-class and exact-active-class props which allow you to instruct the component to apply a different class name from the default. You also do not need to place a <b-link> inside <b-nav-item> as <b-nav-item> supports the to prop:

<b-navbar-nav>
  <b-nav-item to ="/" active exact-active-class="exact-link-change">Home</b-nav-item>
  <b-nav-item :to="{name: 'Rooms'}" exact-active-class="exact-link-change">Rooms</b-nav-item>
  <b-nav-item :to="{name: 'About' }" exact-active-class="exact-link-change">About</b-nav-item>
  <b-nav-item :to="{name: 'ContactUs'}" exact-active-class="exact-link-change">Contact Us</b-nav-item>
</b-navbar-nav>

The exact-active-class and active-class props are reactive, so you can v-bind them to a computed prop which returns a particular class name based on some condition.

I would suggest reading the following:

<template>
  <b-navbar-nav>
    <b-nav-item to ="/" :exact-active-class="activeClass">Home</b-nav-item>
    <b-nav-item :to="{name: 'Rooms'}" :exact-active-class="activeClass">Rooms</b-nav-item>
    <b-nav-item :to="{name: 'About' }" :exact-active-class="activeClass">About</b-nav-item>
    <b-nav-item :to="{name: 'ContactUs'}" :exact-active-class="activeClass">Contact Us</b-nav-item>
  </b-navbar-nav>
</template>

<script>
export default {
  data(){
    return{
      isPast100Px: false
    }
  },
  computed: {
    activeClass() {
      return this.isPast100px ? 'exact-link-change' : ''
    }
  }
  methods:{
    handleScroll (event) {
      this.isPast100Px = window.scrollY > 100
    },
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

Leave a comment