如何使用 Vue 在 Laravel 中切换汉堡按钮？
Posted
技术标签:
【中文标题】如何使用 Vue 在 Laravel 中切换汉堡按钮？【英文标题】：How to toggle a hamburger button in Laravel using Vue? 【发布时间】：2020-10-09 19:28:15 【问题描述】：我试图让汉堡切换开关在单击时打开和关闭。我正在使用 Laravel、Tailwindcss、Vue。
我的问题是我对实际放置 JS/Vue 代码的位置感到困惑。
我有 js.app 文件、bootstrap.js 文件、components->exampleComponent（Vue 文件），但还有 Sass 文件夹和文件，包括 Webpack.mix
我应该把这个逻辑放在哪里？为什么？
const Vue = require("vue");
new Vue(
el: "#nav",
data:
isOpen: false
,
methods:
toggle()
this.isOpen = !this.isOpen;
);
这是我的 webpack.mx.js 文件
const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options(
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")]
);
布局页面
<div>
<!---- Nav Bar --->
<nav id="nav" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10" src="/images/startup.svg" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/about"
class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">About</a>
<a href="/portfolio"
class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Portfolio</a>
<a href="/posts"
class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button
class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700"
aria-label="Notifications">
<button>
<a href="#"
class="px-3 py-2 rounded-md text-sm font-medium text-white bg-green-500 focus:outline-none focus:text-white focus:bg-gray-700">Sign
Up</a>
</button>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button
class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid"
id="userMenu" aria-label="userMenu" aria-haspopup="true">
<img class="h-8 w-8 rounded-full" src="/images/0.jpeg" />
</button>
</div>
<!--
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
</div>
</div>
</div>
</div>
<div class="mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button @click="toggle"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class=" block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke- d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!--
Mobile menu, toggle classes based on menu state.
Open: "block", closed: "hidden"
-->
<div v-show="isOpen" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/homne"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/about"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">About</a>
<a href="/portfolio"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Portfolio</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">#</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">Email Address</div>
</div>
</div>
<div class=" mt-3 px-2">
<a href="#"
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Your
Profile</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Settings</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Sign
out</a>
</div>
</div>
</div>
</nav>
<header class="bg-white shadow">
</div>
</header>
<body class="flex flex-col min-h-screen">
<main class="flex-grow">
<!-- Replace with your content -->
@yield('content')
<!-- /End replace -->
</div>
</main>
</div>
</body>
【问题讨论】：
你在使用 vue-cli 吗？ 我通过 composer 安装需要 laravel/ui 【参考方案1】：在你的 webpack.mx.js 文件的第 2 行，它已经声明了
"resources/js/app.js"是根路径
【讨论】：
好的，很高兴知道。这是我放置上述逻辑的地方。但是，切换不起作用？在原帖中添加了查看源代码。<nav id="nav">codes</nav> 的内容应该在 app.js 文件中以上是关于如何使用 Vue 在 Laravel 中切换汉堡按钮？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Laravel 中将 Vue.js 切换到生产模式？
如何使用 vue axios 在 laravel 中解决 401 未授权响应