I'm pretty new to VueJS and BootstrapVue and I've made a method using the event scroll in my navbar component to replace
router-link-exact-active
with
exact-link-change
Though it works, I get the problem
Uncaught TypeError: Cannot read property 'classList' of null"
The problem lies within these 2 codes:
link.classList.add("exact-link-change")
cLink.classList.add("router-link-exact-active")
Here's the script file in the component:
<script type="text/javascript">
export default{
name:'Navbar',
data(){
return{
}
},
methods:{
handleScroll (event) {
let header = document.querySelector(".nav");
let link = document.querySelector(".router-link-exact-active");
let cLink = document.querySelector(".exact-link-change");
if (window.scrollY > 100) {
header.classList.add("nav--bgscroll")
link.classList.add("exact-link-change")
link.classList.remove("router-link-exact-active")
}
else{
header.classList.remove("nav--bgscroll")
cLink.classList.add("router-link-exact-active")
cLink.classList.remove("exact-link-change")
}
},
},
created () {
window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll);
}
}
</script>
Here's the HTML:
<template>
<b-navbar toggleable= "lg" type="light" class = "nav" @scroll = "handleScroll">
<b-navbar-brand class = "title"> Aquafarm Beach Resort</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item><b-link to ="/" active >Home</b-link></b-nav-item>
<b-nav-item><b-link :to="{name: 'Rooms'}">Rooms</b-link></b-nav-item>
<b-nav-item><b-link :to="{name: 'About' }">About</b-link></b-nav-item>
<b-nav-item><b-link :to="{name: 'ContactUs'}">Contact Us</b-link></b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto" >
<b-button variant= "outline-dark" :to="{name: 'Booking'}">Book Now</b-button>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.