nuxt/vue:如果单击嵌套的nuxt链接,则忽略单击父级

我对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-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存储区中的布尔值设置为true。

到目前为止还不错:但现在问题是: 只要我单击触发 openDetailView 方法,也会触发对列的单击,并且 它会立即重置 详细视图激活 . (打开>关闭)只需单击一次。

所以

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

谢谢你的提示。 干杯