@click未在Vue devtools中注冊事件

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，然后再返回。 我得到的完全沒有任何事件。

您當前正在做的是返回的是false subMenuHidden值的取反，但是狀態變量本身未發生任何變化。

將切換方法更改為： this.subMenuHidden = !this.subMenuHidden;