Bulma의 Navbar-buger는 Vue.js 2의 메뉴 항목에 연결되지 않음

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

보다시피 나는 여기에 존재하지만 소용이 없는 예제 코드를 구현하려고 노력했다.Bulma가 응답하는 Navbar를 박스에서 꺼내줘야 해.내가 찾은 모든 예와 해결책은 새로운 "나브바"가 아닌 오래된 "나브" 클래스를 위한 것이다.도와주시면 감사하겠다.

그래서, 부에 가이드와 뚱뚱한 사람의 논평에서 나온 단서들을 조금 연구한 후에, 이것이 내가 적용한 해결책이다.

위의 코드는 작동하지만, 이것은 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>

이게 누군가에게 도움이 되길 바래.쇼/숨기기 기능은 불마가 관리한다.

이게 효과가 있지만.

1. 메뉴를 닫지 않음
2. 라우터 라우터가 작동하지 않음

1.) navbar-item에도 @클릭을 추가하는 방법:

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

참조URL: https://stackoverflow.com/questions/46211208/bulmas-navbar-buger-doesnt-connect-to-menu-items-in-vue-js-2