未捕获的类型错误：无法在方法中读取 null 的属性“classList”

Posted 2023-02-23

【中文标题】未捕获的类型错误：无法在方法中读取 null 的属性“classList”

【英文标题】：Uncaught TypeError: Cannot read property 'classList' of null at method

【发布时间】：2020-03-25 07:12:29

【问题描述】：

我对 VueJS 和 BootstrapVue 还很陌生，我已经创建了一个方法，使用导航栏组件中的事件滚动来替换

路由器链接精确激活

与

精确链接更改

虽然它有效，但我得到了问题

未捕获的类型错误：无法读取属性 '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>

【问题讨论】：

哪一行实际上导致了错误？您有六行引用classList。如果您告诉我们是哪一个导致了问题，我们可能会更好地了解正在发生的事情。

你在声明类时有一些空格，例如：把这个：class = "nav"改成这个：class="nav"

您正在使用 vue 并尝试在 vanilla js 中操作 DOM。这里有问题。除了让这段代码工作之外，我认为你应该尝试对你的代码进行 vueize。

我的错，已编辑。 @Matt U

Vue 允许您将类和样式绑定到元素。您应该更改绑定到元素的组件属性，而不是更改 dom。 12

【参考方案1】：

BootstrapVue 中接受to 属性的大多数组件也具有active-class 和exact-active-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 到计算的属性上，该属性根据某些条件返回特定的类名。

我建议阅读以下内容：

https://bootstrap-vue.js.org/docs/reference/router-links/ https://bootstrap-vue.js.org/docs/components/nav#comp-ref-b-nav-item

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