Css 布尔马'；s navbar buger未连接到Vue.js 2中的菜单项

我正在尝试为我的应用程序实现一个导航栏，其前端是使用Vue 2.0和Bulma构建的。它在台式机上运行良好，但在较小的屏幕上显示汉堡图标，但不显示任何元素。这只是现在

<template>
<div class="container is-fluid">
    <div>
      <nav class="navbar is-dark">
        <div class="navbar-brand">
          <a class="navbar-item" href="#">
              <img  alt="K R O N O S" height="100px">
          </a>
          <div class="button navbar-burger" data-target="navMenu">
              <span></span>
              <span></span>
              <span></span>
        </div>
        </div>
        <div class="navbar-menu" id="navMenu">
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="" href="#"> Docs </a>
            </div>
            <div class="navbar-item ">
              <a class="" href="#"> Report </a>
            </div>
            <div class="navbar-item">
              <a class="">More</a>
            </div>
            <div class="navbar-item">
              <a class="">Logout</a>
            </div>
        </div>
      </div>
    </nav>
  </div>
</div>
</template>

<script>

document.addEventListener('DOMContentLoaded', function () {
  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {
    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {
        // Get the target from the "data-target" attribute
        var target = $el.dataset.target
        var $target = document.getElementById(target)

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active')
        $target.classList.toggle('is-active')
      })
    })
  }
})
export default {
  name: 'Navbar',
  data () {
    return {
      msg: ''
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  border: 0px solid black;
}
</style>

更多
注销
document.addEventListener（'DOMContentLoaded'，函数（）{
//获取所有“navbar汉堡”元素
var$navbarBurgers=Array.prototype.slice.call（document.queryselectoral（'.navbar-burger'），0）
//检查是否有navbar汉堡
如果（$navbarBurgers.length>0）{
//在每个按钮上添加单击事件
$navbarBurgers.forEach（函数（$el）{
$el.addEventListener（'click'，函数（）{
//从“数据目标”属性获取目标
var target=$el.dataset.target
var$target=document.getElementById（目标）
//在“导航栏汉堡”和“导航栏菜单”上切换类
$el.classList.toggle（'is-active'）
$target.classList.toggle（'is-active'）
})
})
}
})
导出默认值{
名称：“导航栏”，
数据（）{
返回{
消息：“”
}
}
}
div{
边框：0px纯黑；
}

---

如您所见，我已经尝试在中实现示例代码，但没有任何用处。Bulma不应该给我开箱即用的导航条吗。我找到的所有示例和解决方案都是针对较旧的“nav”类的，而不是针对较新的“navbar”。非常感谢您的帮助。

因此，在研究了一点Vue指南和用户评论中的线索之后，这就是我应用的修复方法

上面的代码是有效的，但这是一种更加vue-ish的方式来实现navbar汉堡菜单

<template>

      <nav class="navbar">
        <div class="container">
        <div class="navbar-brand is-large">
          <a class="navbar-item" href="#">
              <img  alt="K R O N O S" height="100px">
          </a>
          <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
              <span></span>
              <span></span>
              <span></span>
        </button>
        </div>
        <div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="" href="#"> Docs </a>
            </div>
            <div class="navbar-item ">
              <a class="" href="#"> Report </a>
            </div>
            <div class="navbar-item">
              <a class="">More</a>
            </div>
            <div class="navbar-item">
              <a class="">Logout</a>
            </div>
        </div>
      </div>
      </div>
    </nav>

</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      msg: '',
      activator: false
    }
  },
  methods: {
    makeBurger () {
      this.activator = !this.activator
      return this.activator
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  border: 0px solid black;
}
</style>

更多
注销
导出默认值{
名称：“导航栏”，
数据（）{
返回{
消息：“”，
激活剂：假
}
},
方法：{
马克伯格（）{
this.activator=！this.activator
退回这个激活器
}
}
}
div{
边框：0px纯黑；
}

希望这对别人有帮助。显示/隐藏功能由Bulma负责。

这是可行的，但是

不会关闭菜单

将导致路由器链接不工作

对于1.）我还建议将@click添加到导航栏项：

<a @click="makeBurger" class="navbar-item">
    <router-link to="/login">
        {{link1}}
    </router-link>
</a>

{{link1}}

如果您使用的是Vue，为什么要使用纯JS定义事件？这是我的测试平台。我是Vue的新手，所以没有继续。有没有更惯用的vue方法？当然，vue使做这些事情更容易，我建议你读一读关于vue的文章it@fatman有什么特别的建议吗？请你详细说明第一点。因为我可以关闭menuHi@VipinRai，菜单上的导航栏项代码会关闭，否则不会关闭。但是对于2.）我一直不精确：用户必须显式地单击导航栏项的文本，而不是行-然后路由器的内容将被加载。如果用户单击该行，菜单将消失，但内容保持不变。