Level 102
I don't use vue, but a quick glance at the docs show this syntax
@click="toggleNav"
Aug 22, 2022
12
Level 7
click method not working Vue 3
I am simply trying to add a click listener on my mobile menu hamburger icon so show and hide my mobile menu but nothing is being logged in the console on the click?! please help
<template>
<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-nav">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button
type="button"
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:ring-2 focus:ring-inset focus:ring-white
"
aria-controls="mobile-menu"
aria-expanded="false"
@click="this.toggleNav()"
>
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg
class="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg
class="hidden h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div
class="
flex-1 flex
items-center
justify-center
sm:items-stretch sm:justify-start
"
>
<div class="flex-shrink-0 flex items-center">
<img
class="block lg:hidden h-8 w-auto"
src="./assets/sotic.png"
width="137"
height="49"
alt="Sotic"
/>
<img
class="hidden lg:block h-8 w-auto"
src="./assets/sotic.png"
width="137"
height="49"
alt="Sotic"
/>
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="#"
class="
bg-gray-900
text-white
px-3
py-2
rounded-md
text-sm
font-medium
"
aria-current="page"
>Dashboard</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
px-3
py-2
rounded-md
text-sm
font-medium
"
>Team</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
px-3
py-2
rounded-md
text-sm
font-medium
"
>Projects</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
px-3
py-2
rounded-md
text-sm
font-medium
"
>Calendar</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div
class="sm:hidden"
id="mobile-menu"
:class="showMenu ? 'flex' : 'hidden'"
>
<div class="px-2 pt-2 pb-3 space-y-1">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="#"
class="
bg-gray-900
text-white
block
px-3
py-2
rounded-md
text-base
font-medium
"
aria-current="page"
>Dashboard</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
block
px-3
py-2
rounded-md
text-base
font-medium
"
>Team</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
block
px-3
py-2
rounded-md
text-base
font-medium
"
>Projects</a
>
<a
href="#"
class="
text-gray-300
hover:bg-gray-700 hover:text-white
block
px-3
py-2
rounded-md
text-base
font-medium
"
>Calendar</a
>
</div>
</div>
</nav>
<RouterLink class="nav-link" to="/">Home</RouterLink>
<RouterLink class="nav-link" to="/about">About</RouterLink>
<div class="container">
<RouterView />
</div>
</template>
<script>
import { RouterLink, RouterView } from "vue-router";
export default {
data() {
return {
showMenu: false,
};
},
methods: {
toggleNav() {
this.showMenu = !this.showMenu;
console.log("hellooo");
},
},
};
</script>
<style scoped>
.bg-nav {
background-color: #284b63;
}
.navbar-light .navbar-nav > li > a {
color: #fff;
}
.navbar-light .navbar-nav .active > .nav-link {
color: #fff;
}
</style>
Level 7
yep, tried that thanks, still nothing
Level 104
@boyjarv if there are errors in your console, your Javascript (Vue component) will not work.
Level 7
there's no errors
Level 104
@boyjarv debug it then. Add a console.log('pippo') into the toggleNav method and check for any output when the button is clicked.
Level 7
@tykus I have, you can see I am debugging in my code with hellooo
Level 104
@boyjarv and, do you see the hellooo in the console? If you do, and the showMenu state is being changed, then the problem is with the template - what is not working???
Level 7
So I just put in a seperate button underneath at the bottom of my template:
<button @click="toggleNav">Here</button>
this works?! but why Can't I add this to the icon button in my navigation???
Level 7
I fixed it by adding tailwind class z-10 to my button inside the navigation
Level 104
@boyjarv so, you were never actually clicking the button???
Level 7
yes, lesson learned here that nothing being logged to console meant button not being clicked!
very confusing as the button is in the code, it was just kind of hidden
Thank you @tykus
Please or to participate in this conversation.