Uncaught TypeError: Cannot read property 'classList' of null at method

Question

我是 VueJS 和 BootstrapVue 的新手，我制作了一个方法，使用我的导航栏组件中的事件滚动来替换

router-link-exact-active

和

exact-link-change

虽然有效，但我遇到了问题

Uncaught TypeError: Cannot read property 'classList' of null"

问题出在这两个代码中：

link.classList.add("exact-link-change")

cLink.classList.add("router-link-exact-active")

组件中的脚本文件如下：

<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>

这是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>

Answer 1

BootstrapVue 中大多数接受 to 道具的组件也有 active-class 和 exact-active-class 道具，它们允许您指示组件应用不同的 class默认名称。您也不需要在 <b-nav-item> 中放置 <b-link>，因为 <b-nav-item> 支持 to 属性：

<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>

exact-active-class 和 active-class 道具是反应性的，因此您可以将它们 v-bind 到一个计算道具，returns 一个特定的 class 名称基于某些条件.

我建议阅读以下内容：

<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>

Uncaught TypeError: Cannot read property 'classList' of null at method

Uncaught TypeError: Cannot read property 'classList' of null at method

javascript

vue.js

vue-component

bootstrap-vue