Question

因此，我正在使用Vuejs（CLI3）构建一个Rails 6 API和Tailwindcss的前端应用程序，我根据JS Fiddle中Adam Adam的示例构建了我的导航（我将脚本重新构建为它已经过时，无法正常工作）。

我当前的问题是，当我将屏幕拖动到较小的位置以触发响应式菜单时，它会按应有的方式打开，但是当我选择一个链接时，它会更改页面（也应如此），但不会自动关闭导航菜单。我无法为自己的生活弄清楚哪里出了问题。（我是vue新手，所以我确定它已经完成了。）

这是我在应用程序中显示的Nav条形码。

<template>
  <div class="font-sans " id="navbar">
    <nav class="flex items-center justify-between flex-wrap bg-transparent p-5 border-b border-project-blue-dark w-full fixed">
      <div class="flex items-center flex-no-shrink text-project-blue-dark mr-6">
        <span class="logoFont font-bold text-3xl tracking-tighter"><i class="fas fa-truck-loading fill-current text-2xl"></i><span class="-ml-1">LOADZE</span><span class="text-sm">.com</span></span>
      </div>
      <div class="block sm:hidden">
        <button @click="toggle" class="flex items-center px-3 py-2 border rounded text-project-blue-dark border-project-blue-dark hover:text-project-blue-light hover:border-project-blue-light">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="text-sm sm:flex-grow" id="navLeft">
          <router-link to="/" class="navLink sm:inline-block sm:mt-0" v-if="!signedIn()">Home</router-link>
          <router-link to="/about" class="navLink sm:inline-block sm:mt-0" v-if="!signedIn()">About</router-link>
          <router-link to="/features" class="navLink sm:inline-block sm:mt-0" v-if="!signedIn()">Features</router-link>
          <router-link to="/pricing" class="navLink sm:inline-block sm:mt-0" v-if="!signedIn()">Pricing</router-link>
          <router-link to="/pricing" class="navLink sm:inline-block sm:mt-0" v-if="!signedIn()">Contact Us</router-link>
        </div>
        <div id="navRight">
          <router-link to="/login" class="navLinkRight sm:inline-block sm:mt-0" v-if="!signedIn()">Login</router-link>
          <router-link to="/start_trial" class="navLinkRight sm:inline-block sm:mt-0" v-if="!signedIn()">Start Free Trial</router-link>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      open: false
    }
  },
  created () {
    this.signedIn()
  },
  methods: {
    toggle () {
      this.open = !this.open
    },
    signedIn () {
      return localStorage.signedIn
    },
    signOut () {
      this.$http.secured.delete('/signin')
        .then(response => {
          delete localStorage.csrf
          delete localStorage.signedIn
          this.$router.replace('/')
        })
        .catch(error => this.setError(error, "'can't sign out"))
    }
  }
}
</script>

VueJS / CLI3导航栏在“链接单击”上未关闭（响应菜单）

0 个答案: