vue.js - Rails Vuejs - 在滚动上更改导航链接颜色不起作用

Question

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

一切都运行得非常好，除了我的导航链接主页，关于等。

现在，当我尝试在滚动时执行 getElementsByClassName('navlinks') 时没有任何反应，并且我在控制台中收到此错误 Navbar.vue:95 UncaughtTypeError: 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>

这是我的 Vue 模板中的挂载函数：

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");
          }
        }
      })
    })
}

如果您需要更多信息，请告诉我。就像我说的所有其他更改都在工作，我只是在尝试定位多个链接以更新其滚动样式时遇到上述错误。

标签： vue.js