Nuxt / Vue: щелчок по родительскому элементу игнорируется, если щелкнуть по вложенной ссылке nuxt. - PullRequest
Новая
       12

Nuxt / Vue: щелчок по родительскому элементу игнорируется, если щелкнуть по вложенной ссылке nuxt.

0 голосов
/ 05 июля 2018

У меня следующая проблема с магазинами nuxt, vue и vuex:

У меня есть специальный мобильный макет с двумя столбцами, которые переключаются при нажатии: https://streamable.com/fqm8a

Как вы можете видеть, щелчок левой колонки показывает его, а клик правой - календарь.

Что я хочу улучшить сейчас: если я нажму на тизер в календаре, я хочу автоматически вставить сообщение в представление.

Пока у меня есть этот код на столбцах обтекания: 

<template>
  <div class="CalendarView">
    <div v-on:click="detailViewActive ? toggleDetailView() : null" id="CalendarView" :class="['CalendarView__column', 'CalendarView__column--calendar', detailViewActive ? 'detail-view-active' : '']">
      <div class="CalendarView__column-wrapper">
        <slot name="column-left"></slot>
      </div>
    </div>
    <div v-on:click="!detailViewActive ? toggleDetailView() : null" :class="['CalendarView__column', 'CalendarView__column--postdetail', detailViewActive ? 'detail-view-active' : '']">
      <slot name="column-right"></slot>
    </div>
  </div>
</template>

Завершено: щелчок устанавливает detailViewActive, который является логическим значением в хранилище vuex. И это меняет классы на столбцах, что активирует CSS-переходы.

Нет, я думал, что я открою компонент записи календаря, и я бы сделал еще один щелчок по пустой ссылке: 

<nuxt-link class="PostTeaser__link" :to="link" v-on:click.native="!detailViewActive ? openDetailView() : null">
  tags, date and title
</nuxt-link>

и метод: 

openDetailView () {
  this.log('open detail')
  this.$store.commit('ui/OPEN_DETAILVIEW')
}

Это снова изменит логическое значение detailViewActive в хранилище vuex на true.

Пока все хорошо: но теперь к проблеме: Как только я нажимаю на nuxt-ссылку, которая запускает метод openDetailView, щелчок по столбцу также запускается и Он немедленно сбрасывает detailViewActive. (Открыть> Закрыть) одним щелчком мыши.

Итак

Кто-нибудь знает, как я могу решить это?

спасибо за любую подсказку. Приветствия

1 Ответ

0 голосов
/ 05 июля 2018

Ну, у меня есть решение:

Я установил 

openDetailView () {
  /*
   * wait for the next tick, otherwise the click on the calendar column will be triggered (due to detailViewActive being true)
   * and the detailView will close immediately again
   */
  this.$nextTick(() => {
    this.$store.commit('ui/TOGGLE_DETAILVIEW')
  })
}

Так что detailViewActive еще не истина, когда щелчок сброса выполняется ...

...