Vue响应式菜单失效：原生JS实现无效果问题排查

问题根源 #

1. 点击事件绑定错误：你把toggleMenu方法绑定在了「Sign in」按钮上，而汉堡菜单的SVG图标没有绑定任何点击事件，所以点击汉堡图标自然没反应。
2. DOM操作不符合Vue最佳实践：直接用document.querySelector操作DOM类名，虽然能运行，但Vue推荐用数据驱动视图的方式，更易维护且避免潜在冲突。

修复方案 #

步骤1：给汉堡菜单添加点击事件 #

给SVG标签加上@click="toggleMenu"，让点击汉堡图标时触发菜单切换：

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
  class="w-6 h-6 text-3-xl cursor-pointer md:hidden"
  @click="toggleMenu"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
  />
</svg>

步骤2：改用Vue数据绑定控制类名（推荐） #

定义一个响应式数据来控制菜单的显示状态，替代原生DOM操作：

<template>
  <header class="bg-white">
    <nav class="flex justify-between items-center w-[92%] mx-auto">
      <div>
        <img
          src="https://cdn-icons-png.flaticon.com/512/5968/5968204.png"
          alt="Logo"
          class="w-16"
        />
      </div>
      <!-- 用:class绑定动态控制top类 -->
      <div
        :class="[
          'nav-links md:static md:min-h-fit absolute bg-green-300 min-h-[60vh] left-0 w-full flex items-center md:w-auto px-5',
          isMenuOpen ? 'top-[9%]' : 'top-[-100%]'
        ]"
      >
        <ul
          class="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8"
        >
          <li><a class="hover:text-gray-500" href="">Product</a></li>
          <li><a class="hover:text-gray-500" href="">About us</a></li>
          <li><a class="hover:text-gray-500" href="">Contact</a></li>
        </ul>
      </div>
      <div class="flex items-center gap-6">
        <button
          class="bg-[#a6c1ee] text-white px-5 py-2 rounded-full"
        >
          Sign in
        </button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6 text-3-xl cursor-pointer md:hidden"
          @click="toggleMenu"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
          />
        </svg>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
      // 可保留console.log验证触发状态
      console.log('菜单状态切换:', this.isMenuOpen);
    },
  },
};
</script>

<style></style>

额外说明 #

• 移除了「Sign in」按钮上的@click="toggleMenu"，避免误触触发菜单切换。
• 数据绑定的方式更符合Vue响应式机制，后续扩展菜单功能（比如点击页面其他区域关闭菜单）会更便捷。

内容的提问来源于stack exchange，提问作者user21903805