Bulma的导航栏汉堡菜单在Vue.js 2中无法连接到菜单项

Question

我正在尝试为使用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>

你可以看到，我已经尝试在这里实现示例代码，但没有任何用处。难道Bulma不应该给我一个响应式导航栏吗？我找到的所有示例和解决方案都是针对旧版“nav”类而非新版“navbar”。非常感谢您的帮助。

- Vipin Rai

---

如果您正在使用Vue，为什么要使用纯JS来定义事件？ - Tomer

当然，Vue 让这些事情变得更容易了，我建议你多了解一下它。 - Tomer

@fatman 有具体的指导吗？ - Vipin Rai

https://vuejs.org/v2/guide/ - Tomer

那么基本上，如果我将v-on:click指令绑定到navbar-burger上，回调函数应该改变数值。这样会起作用吗？ - Vipin Rai

Answer 1

经过研究Vue指南和fatman的评论线索后，我应用了以下修复方法。

上述代码可以工作，但这是一种更符合Vue方式的navbar-burger菜单实现方法。

<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>

希望这能帮到某些人。显示/隐藏功能由Bulma处理。

- Vipin Rai

Answer 2

这个可以实现，但是：

1. 无法关闭菜单
2. 会导致路由链接无法使用

对于第一点，我建议在navbar-item上也添加@click事件：

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

- wider-spider

---

请您能否详细说明第一点，因为我已经可以关闭我的菜单了。 - Vipin Rai

嗨@VipinRai， 使用navbar-item的代码可以关闭菜单，否则不行。但是在2.)中，我表述不够准确：用户必须明确点击navbar-item的文本，而不是行 - 然后将加载路由器的内容。如果用户点击行 - 菜单消失，但内容保持不变。 - wider-spider