Vue.js Nuxt/Vue：如果单击嵌套的Nuxt链接，则忽略单击父级

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

我有一个特殊的移动布局，有两列，点击即可切换：

正如你所看到的，点击左边的列会显示它，点击右边的列会显示日历

我现在想要改进的是：如果我点击日历中的摘要，我想自动将文章滑入视图

到目前为止，我在包装列中有以下代码：

<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>

方法是：

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

这会再次将vuex存储中的

detailViewActive

布尔值更改为true

到目前为止还不错：但现在问题来了： 只要我单击触发

openDetailView

方法的nuxt链接，就会触发对列的单击，并且 它会立即重置激活的

detailview

。 （打开>关闭）只需单击一次

所以

有人知道我怎么解决这个问题吗

谢谢你的提示。

---

干杯

好吧，我有个解决办法：

我设定

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

还不是真的

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