Nuxt.js 服务器端 Javascript 问题，框架混乱

Question

我和一个合作伙伴正在为一个学校项目做网站，我们决定使用 Vue.js 和 Nuxt.js 作为前端框架，使用 Vuesax 作为 UI 框架。 直到最近，我们都没有任何使用这些框架或坦率地说 Web 开发的经验。 当我们尝试创建配置文件下拉菜单时，我们遇到了第一个主要问题，当您单击配置文件头像时，菜单项会变得可见，但是在尝试使用事件侦听器时，我们实现了 Nuxt.js（基于在节点上）是用于通用 javascript 而不是严格的客户端，所以当我们使用“document.getElementId”进行事件处理时，它说它没有定义。 （没有 DOM）

我们真的不知道从这里开始做什么——找到一个新的框架或插件/扩展——我们想知道我们是否能得到一些见解。 我们希望能够纯粹使用 Javascript 来处理前端事件。 展望未来，我们还想从数据库中获取信息（目前在 MySQL 中，但可能会因反馈而改变），我们曾考虑使用 Spring Boot 作为我们的后端框架，因为它允许我们处理请求，在 Java 中创建 servlet（我们最舒适的语言）并且还有 Tomcat。

我们做了很多研究，咨询了很多网站和熟人，但有时很难找到与如此具体的东西相关的东西，在这种情况下，我们的项目。 我们也很难找到一个具有凝聚力和相互兼容的框架系统。 我们非常愿意学习，所以任何见解、反馈或建议都值得赞赏！

Answer 1

从图像中可以看出，您正在尝试在 nuxt 中执行 dom 操作，但未定义 windows 和 document。

要做你想做的事，你必须像这样尝试。

<template>
  // @click is the event listener to change the state
  <button @click="mobileNavOpen = !mobileNavOpen">Toggle btn</button>
  // bind the show class conditonally according to mobileNaveOpen state and add the display state to the show class.
  <div :class="{show : mobileNavOpen}">
    <ul class="navbar-nav align-items-center">
      <li class="nav-item active">
        <nuxt-link class="nav-link" to="/">
          Home
        </nuxt-link>
      </li>
      <li class="nav-item">
        <nuxt-link class="nav-link" to="/about">
          About
       </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        mobileNavOpen: false,
      }
    },
    methods: {
      closeMobileNavbar() {
        this.mobileNavOpen = false
      }
    }
  }
</script>