Question

我有一个组件，该组件旨在动态捕获菜单项是否附加有子菜单，该菜单确实可以成功完成。我已经在实例上设置了一个方法来切换是否显示subMenu，但是当我单击它时，什么也没有发生。在Vue devtools中，事件部分未注册任何内容。而且由于未触发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，然后再更改。我得到的根本没有任何事件。

Answer 1

基本上，我期望subMenuToggle事件触发并将本地状态从subMenuHidden = false更改为true，然后再更改。我得到的根本没有任何事件。

您当前正在执行的操作是返回subMenuHidden的值false的取反，但是状态变量本身什么也没有发生。

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

@click未在Vue devtools中注册事件

1 个答案: