首页 文章

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

提问于
浏览 次
0

我对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 .

So far so good: But now to the problem: 当我点击触发 openDetailView 方法的nuxt-link时，也会触发列上的点击，它会立即重置 detailViewActive . （单击“打开”>“关闭”） .

所以

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

谢谢你的暗示 . 干杯

vue.js onclick store vuex nuxt.js

1 回答

  • 0

    好吧，我得到了一个解决方案：

    我设置

    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 还没有，当执行重置点击时...

    回复于

相关问题