Rails Vuejs-滚动时更改导航链接颜色不起作用

所以我正在用Vue/Webpack应用程序构建一个Rails6。我要做的是在页面滚动中更改导航栏中的多个组件。

现在,当我尝试在滚动条上执行getElementsByClassName('navlinks')时,什么也不会发生,我的控制台导航栏中会出现此错误。vue:95 Uncaught TypeError: Cannot read property 'contains' of undefined

我对Vue和JS还不熟悉,所以我觉得我错过了一些小东西,但我无法用我的一生来理解这一点。

以下是我的导航链接:

<Navbar>
  <%= link_to "Home", root_path, class: "navlinks sm:inline-block sm:mt-0", slot: "nav-link" %>
  <%= link_to "About", about_path, class: "navlinks sm:inline-block sm:mt-0", slot: "nav-link" %>
  <%= link_to "Features", features_path, class: "navlinks sm:inline-block sm:mt-0", slot: "nav-link" %>
  <%= link_to "Pricing", pricing_path, class: "navlinks sm:inline-block sm:mt-0", slot: "nav-link" %>
  <%= link_to "Contact", contact_path, class: "navlinks sm:inline-block sm:mt-0", slot: "nav-link" %>
</Navbar>

mounted () {
    this.$nextTick(function(){
      window.addEventListener("scroll", function(){
        var navbar = document.getElementsByClassName("navlinks");
        var nav_classes = navbar.classList;
        if(document.documentElement.scrollTop >= 150) {
          if (nav_classes.contains("scrollLink") === false) {
            nav_classes.toggle("scrollLink");
          }
        }
        else {
          if (nav_classes.contains("scrollLink") === true) {
            nav_classes.toggle("scrollLink");
          }
        }
      })
    })
}

如果你需要更多的信息,请告诉我。就像我说的所有其他更改都在工作,我只是得到了上述错误,同时试图目标多个链接,以更新他们的风格滚动。