Nuxt/Vue:如果单击嵌套nuxt-链接，则单击忽略的父节点
Nuxt/Vue:如果单击嵌套nuxt-链接，则单击忽略的父节点
提问于 2018-07-05 09:25:49
对于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。(打开>关闭)只需一次单击。
所以
有人知道我怎么解决这个问题吗？
谢谢你的暗示。干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-05 12:42:18
我有个解决办法：
我设置
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还不是真.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51187804
复制相关文章
相似问题
腾讯云开发者
