there is a component that is designed to dynamically catch whether a menu item has a submenu attached to it, which it does successfully do. there is set up a method on the instance to toggle whether or not to show the subMenu, but when I click on it, nothing happens. In the vue.js devtools, nothing is registered in the events section. And since the click event isn’t triggered, I’m not getting the expected show/hide toggle.
I’ve tried to follow as closely as I could with the vue.js docs, but despite having the same syntax, I still have no success.
Here is my single file component. The method is called on the two font awesome icons with the @click.
<template>
<div class=”subMenuCatcher”>
<router-link class=”routerLink” active-class=”active” :to=”menuItem.route” exact>
{ menuItem.routeName }
</router-link>
<i
class=”fas fa-arrow-alt-circle-down icon”
:class=”{ hidden: !subMenuHidden }”
@click=”subMenuToggle”
\></i>
<i
class=”fas fa-arrow-alt-circle-up icon”
:class=”{ hidden: subMenuHidden }”
@click=”subMenuToggle”
\></i>
<div
class=”subMenu”
:class=”{ hidden: subMenuHidden }”
v-for=”(subMenuItem, index) in menuItem.subMenu”
:key=”index”
\>
<router-link class=”routerLink” active-class=”active” :to=”subMenuItem.subRoute” exact>
{ subMenuItem.subRouteName }
</router-link>
</div>
</div>
</template>
<script>
const subMenuHidden = true;
export default {
props: {
‘menu-item’: Object,
},
data: function() {
return {
subMenuHidden,
};
},
methods: {
subMenuToggle: function() {
return !this.subMenuHidden;
},
},
};
</script>
<style scoped lang=”scss”>
.subMenuCatcher {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
.subMenu {
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.routerLink {
text-decoration: none;
color: $routerLinkColor;
}
.active {
color: $activeColor;
}
.icon {
color: $routerLinkColor;
}
.hidden {
display: none;
}
}
</style>
Basically, I’m expecting the subMenuToggle event to fire and change the local state from subMenuHidden = false to true and back. What I’m getting is no event at all.
Solution :
Basically, I’m expecting the subMenuToggle event to fire and change the local state from subMenuHidden = false to true and back. What I’m getting is no event at all.
What you are currently doing is that you are returning the negation of the subMenuHidden value which is false, but nothing happens to the state variable itself.
Change the toggle method to:
this.subMenuHidden = !this.subMenuHidden;