CODEWITHSUNDEEP
vue.jsonclickstorevuexnuxt.js
Merc
Merc

Reputation: 4570

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

I have the following problem with nuxt, vue and vuex store:

I have a special mobile layout with two columns, which switch on click: https://streamable.com/fqm8a

As you can see a click on the left column reveals it and and a click on the right one reveals the calendar.

What I want to improve now: If I click on the teaser in the calendar, I want to automatically slide the post into the view.

So far I have this code on the wrapping columns:

<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>

Wrapped up: the click sets detailViewActive, which is a Boolean in the vuex store. And this changes the classes on the columns, which will activate css transitions.

No I thought I open up the calendar-entry component and I would set another click on the nuxt link:

<nuxt-link class="PostTeaser__link" :to="link" v-on:click.native="!detailViewActive ? openDetailView() : null">
  tags, date and title
</nuxt-link>

and the method:

openDetailView () {
  this.log('open detail')
  this.$store.commit('ui/OPEN_DETAILVIEW')
}

This again would change the detailViewActive Boolean in the vuex store to true.

So far so good: But now to the problem: As soon as I click on the nuxt-link which triggers the openDetailView method, the click on the column is triggered as well and It immediately resets the detailViewActive. (Open > Close) with one click.

So

Does someone have any clue how I could solve this?

thanks for any hint. Cheers

Upvotes: 0

Views: 5972

Answers (1)

Merc
Merc

Reputation: 4570

Well, I got a solution:

I set 

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')
  })
}

So the detailViewActive is not true yet, when the resetting click is executed...

Upvotes: 1

Related Questions