Nuxt/Vue：如果单击嵌套的 nuxt-link，则单击父级忽略答案

【问题标题】：Nuxt/Vue: Click on parent ignored if click on nested nuxt-linkNuxt/Vue：如果单击嵌套的 nuxt-link，则单击父级忽略
【发布时间】：2018-12-13 17:30:08
【问题描述】：

我对nuxt、vue和vuex store有以下问题：

我有一个特殊的移动布局，有两列，点击时会打开： 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 链接：

<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')
}

这又会将 vuex 存储中的 detailViewActive 布尔值更改为 true。

到目前为止一切顺利：但现在问题来了： 只要我点击触发openDetailView 方法的nuxt-link，也会触发对该列的点击，并且它会立即重置detailViewActive。（打开>关闭）一键点击。

所以

有人知道我该如何解决这个问题吗？

感谢任何提示。干杯

【问题讨论】：

标签： vue.js onclick store vuex nuxt.js

【解决方案1】：

好吧，我有一个解决方案：

我设置了

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还不是真的，当执行重置点击时......

【讨论】：