Nuxt/Vue: 如果点击嵌套的 nuxt-link，点击父级将被忽略

Question

我在使用 nuxt、vue 和 vuex store 时遇到以下问题：

我有一个特殊的移动布局，有两列，点击时切换： https://streamable.com/fqm8a

如您所见，单击左列显示日历，单击右列显示日历。

我现在想改进的是：如果我点击日历中的预告片，我想自动将 post 滑入视图。

到目前为止，我在包装列上有这段代码：

<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 store中的一个布尔值。这会更改列上的类，这将激活 css 转换。

不，我以为我打开了日历条目组件，我会在 nuxt 上设置另一个点击 link:

<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。单击（打开 > 关闭）。

所以

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

感谢任何提示。干杯

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

Nuxt/Vue: 如果点击嵌套的 nuxt-link，点击父级将被忽略

Nuxt/Vue: Click on parent ignored if click on nested nuxt-link

store

onclick

vue.js

vuex

nuxt.js