@click not registering event in Vue devtools

Question

I have a component that is designed to dynamically catch whether a menu item has a submenu attached to it, which it does successfully do. I have 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 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 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.

Answer 1

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 your subMenuHidden value which is false , but nothing happens to the state variable itself.

Change your toggle method to: this.subMenuHidden = !this.subMenuHidden;