使用vue.js / nuxt.js单击时切换汉堡图标

Question

我想在这里实现的是通过单击seeNav来切换burger-icon的布尔值。

当前使用下面的代码，出现此错误：

TypeError: handler.apply is not a function
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLDivElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLDivElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

而且我不确定该如何解决...有人可以帮帮我吗？

<template>
  <header class="header">
    <div class="headerflex">
      <h4>
        <nuxt-link to="/">Hello World</nuxt-link>
      </h4>
      <div class="burger-icon" @click="toggleNav">
        <div></div>
      </div>
    </div>
    <TheNavigation v-show="seeNav" />
  </header>
</template>

<script>
import TheNavigation from "./TheNavigation";
export default {
  components: {
    TheNavigation
  },
  data() {
    return {
      seeNav: false
    };
  },
  methods: {
    toggleNav() {
      this.seeNav = !this.seeNav;
    }
  }
};
</script>

Answer 1

也许您可以尝试使用<TheNavigation v-if="seeNav" />？