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>