Question

我在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链接：

<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链接时，也会触发该列的点击，它立即重置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

1 个答案: