@单击Vue devtools中未注册事件

Question

我有一个组件，用于动态捕捉菜单项是否附加了一个子菜单，它成功地做到了这一点。我已经在实例上设置了一个方法来切换是否显示subMenu，但是当我单击它时，什么都不会发生。在Vue devtools中，未在events部分注册任何内容。而且，由于没有触发click事件，所以我不会得到预期的显示/隐藏切换。

我试图尽可能地跟踪Vue文档，但是尽管语法相同，但我仍然没有成功。

这是我的一个文件组件。在两个字体上调用该方法，使用@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>

基本上，我期望subMenuToggle事件触发并将本地状态从subMenuHidden = false更改为true和back。我所得到的完全不是什么大事。

Answer 1

基本上，我期望subMenuToggle事件触发并将本地状态从subMenuHidden = false更改为true和back。我所得到的完全不是什么大事。

您当前要做的是返回subMenuHidden值的否定(即false )，但是状态变量本身没有发生任何变化。

将切换方法更改为：this.subMenuHidden = !this.subMenuHidden;