@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.

Events are triggering via this.$emit(), so you shouldn't see any event. Simple actions/methods aren't registered in devtools. — Daniel
– Daniel, Commented Mar 24, 2019 at 22:15
Also, you've got mistake in subMenuToggle(), it's should be: this.subMenuHidden != this.subMenuHidden. — Daniel
– Daniel, Commented Mar 24, 2019 at 22:18

dziraf · Accepted Answer · 2019-03-24 22:19:18Z

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;

answered Mar 24, 2019 at 22:19

dziraf

3,6531 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jstrother Over a year ago

This was it. Such a simple and elementary mistake. Thanks for spotting this.

Collectives™ on Stack Overflow

@click not registering event in Vue devtools

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related