Блог

У меня есть компонент, который предназначен для динамического отслеживания того, есть ли у элемента меню прикрепленное к нему подменю, что он успешно выполняет. Я настроил метод в экземпляре, чтобы переключать, показывать подменю или нет, но когда я нажимаю на него, ничего не происходит. В Vue devtools в разделе событий ничего не зарегистрировано. И поскольку событие click не запускается, я не получаю ожидаемого переключения «показать / скрыть».

Я пытался как можно тщательнее следить за документами Vue, но, несмотря на тот же синтаксис, у меня все еще нет успеха.

Вот мой компонент с одним файлом. Метод вызывается для двух значков font awesome с помощью @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 и обратно. То, что я получаю, вообще не является событием.

В принципе, я ожидаю, что событие subMenuToggle сработает и изменит локальное состояние с subMenuHidden = false на true и обратно. То, что я получаю, вообще не является событием.

В данный момент вы возвращаете отрицание вашего subMenuHidden значения, которое false равно, но с самой переменной состояния ничего не происходит.

Измените свой метод переключения на: this.subMenuHidden = !this.subMenuHidden;