Событие click не работает при навигации в vueJS

Событие click не работает при навигации в vueJS

28.01.2020 06:57:41 Просмотров 20 Источник

У меня есть меню, оно будет расширяться, когда вы нажмете на стрелку, и если вы нажмете еще раз, будет сокращаться. Я разрабатываю эту опцию, добавляя класс css (.показать) к диву. Проблема возникает, когда я перехожу на другую страницу и пытаюсь показать/скрыть меню, нажав на стрелку, в этот момент ничего не происходит...Почему событие click исчезло? @click может потерять функциональность, Если вы измените представление маршрутизатора ?

function showNav () {
  if (this.$store.getters.showSidebar) {
    this.$store.commit(SET_SHOW_LINK, false)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_SIDEBAR, false)
    }, 500)
  } else {
    this.$store.commit(SET_SHOW_SIDEBAR, true)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_LINK, true)
    }, 500)
  }
}
.container-menu {
  position: absolute;
  top: 65px;
  right: 0;
  width: 50px;
  min-height: calc(100vh - 20px);
  height: 100%;
  background-color: #072146;
  border: solid #fff;
  border-width: 0 0 0 1px;
  z-index: 999;
  transition: all .5s ease-in-out;

  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50px;
    margin-bottom: 10px;
    color: #fff;
    i {
      font-size: 2rem;
      cursor: pointer;
      transition: all .5s ease-in-out;
    }
  }

  &.show {
    width: 160px;
    .control > i {
      color: #fff;
      transform: rotateZ(-180deg);
    }
  }

  .navigation-icons-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px;
    float: right;
    i {
      color: #fff;
      font-size: 2rem;
      padding: 10px 0;
      cursor: pointer;
      transition: all .5s ease-in-out;
      &:hover {
        color: #fff;
      }
    }
  }
  .navigation-links-menu {
    //padding:14px;
    float: right;
    color: #fff;
    div {
      font-size: 1.35rem;
      padding: 10px;
      cursor: pointer;
    }
  }
}
<div class="navigation__menu">
	<div
	  class="container-menu"
	  :class="{'show': this.$store.getters.showSidebar}">
	  <div
		class="control"
		@click="showNav">
		<i
		  class="fas fa-angle-double-left" />
	  </div>
	  <div class="navigation-links-menu">
		<transition-group name="fade">
		  <div
			v-show="this.$store.getters.showLink"
			key="1">Home</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="2">FIG</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="3">Validation</div>
		  <div
			v-show="this.$store.getters.showLink"
			key="4">Authorization</div>
		</transition-group>
	  </div>
	  <div class="navigation-icons-menu">
		<router-link :to="`/`"><i class="fas fa-home" /></router-link>
		<router-link :to="`/console`"><i class="fas fa-clipboard-list" /></router-link>
		<i class="fas fa-check" />
		<i class="fas fa-check-double" />
	  </div>
	</div>
 </div>

У вопроса есть решение - Посмотреть?

Ответы - Событие click не работает при навигации в vueJS / Event click doesn't work when navigate in vueJS

Ferkze

29.01.2020 12:25:42

Решение может быть изменяя свои мутации, чтобы переключить showSidebar государство вместо того, чтобы устанавливать его. Это позволит вам удалить ваши потоки if / else и не беспокоиться о текущем состоянии.

function showNav () {
    this.$store.commit(TOGGLE_SHOW_LINK)
    setTimeout((vue) => {
      vue.$store.commit(TOGGLE_SHOW_SIDEBAR)
    }, 500, this)
}

// mutations.js

mutations: {
    TOGGLE_SHOW_SIDEBAR (state) {
        state.showSidebar = !state.showSidebar
    },
    TOGGLE_SHOW_LINK (state) {
        state.showLink = !state.showLink
    }
}

Когда вы проверяете состояние с помощью вашего геттера, как показано ниже, вы, вероятно, ожидаете this.$store.getters.showSidebarчтобы стать истинным, когда он ложен, но вы пропускаете этот тест 500 мс между щелчками мыши.

  if (this.$store.getters.showSidebar) {
    this.$store.commit(SET_SHOW_LINK, false)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_SIDEBAR, false)
    }, 500)
  } else {
    this.$store.commit(SET_SHOW_SIDEBAR, true)
    setTimeout(() => {
      this.$store.commit(SET_SHOW_LINK, true)
    }, 500)
  }

Другим решением, которое я рекомендую, является отключение элемента, вызывающего showNav, до окончания тайм-аута, но первого решения может быть достаточно.

Закрыть X