Is it possible to have multiple calendars and use v-show to maintain individual state? v-if works but not v-show

[flowt-au]

Hi. Thanks for your earlier help, Jeff. I am now on Quasar V2 and QCalendar App Extension 4.0.0-beta.12. (I am using the app extension because I will be using most of your great components anyway, and am in devland at the moment, exploring). I am still using the Options API until I get all my app upgraded to Q2.

I have a wrapper component which in turn wraps 3 of my components. Each of those contains a <q-calendar-*> ie a day, week and month instance. On my main component I have a toolbar with 3 buttons to select either the day, week or month view via their child wrapper components. Here is a screenshot.

The buttons set the calendarView model prop so the matching view is displayed. Standard stuff.
My question concerns having 3 calendars as children and a problem with event handlers. As you see below I am using v-if but if I use v-show I have problems with the mouse event handlers as described below. I am not sure if this is a bug, or me. ;-)

So, an abridged sample of my layout is:

<div class="col" style="border: 1px solid red;">
  <div v-if="calendarView === 'month'">
    <!-- This wraps <q-calendar-month> -->
    <CalendarMonth
      v-model="selectedDate"
      <!-- other props and event handlers... -->
    />
  </div>

  <div v-if="calendarView === 'week'">
    <!-- This wraps <q-calendar-week> -->
    <CalendarWeek
      v-model="selectedDate"
      <!-- other props and event handlers... -->
    />
  </div>

  <div v-if="calendarView === 'day'">
    <!-- This wraps <q-calendar-day> -->
    <CalendarDay
      v-model="selectedDate"
      <!-- other props and event handlers... -->
    />
  </div>
</div> 

The issue is with the @click-date event.
In my CalendarMonth component I have a q-calendar-month like this (abbreviated):

<q-calendar-month
  ref="calendarmonth"
  @click-date="onClickDateMonth"
>   

onClickDateMonth (data) {
  console.log('rCalendarMonth onClickDateMonth emitting ' + data.scope.timestamp.date)
},

and on my CalendarWeek:

<q-calendar-day
  ref="calendarweek"
  v-model="selectedDate"
  view="week"
  @click-date="onClickDateWeek"
> 

onClickDateWeek (data) {
  console.log('rCalendarWeek onClickDateWeek emitting ' + data.scope.timestamp.date)
},

When I click a date in the month view when using v-if above, my console logs
rCalendarMonth onClickDateMonth emitting 2021-12-22 which is correct.

But when I change to using v-show and do the same thing, the event does not fire at all. Digging into the debugger, the useMouse.js getMouseEventHandlers() does the $emit(eventName, getEvent(mouseEvent, eventName)) when using v-if but is never reached when using v-show.

I was hoping to use v-show to maintain ui state for each calendar view. Is there another way to do it? I originally tried using <q-tab-panels> and keep-alive but that also gave similar problems with event handlers. Perhaps I am missing something in my understanding of Vue.

Thanks!
Murray

[flowt-au]

PS: I also added a Monthly mini-mode instance outside the "tab" divs (the red border bit) and even when using v-if I get the issue described below.

<q-calendar-month
  ref="calendarnav"
  v-model="selectedDate"
  mini-mode
  @click-date="onClickDateNav"
/>

onClickDateNav (data) {
  console.log('onClickDateNav emitting ' + data.scope.timestamp.date)
},

If I click a date in the mini month when the main month is visible (as per the screenshot) the console should log onClickDateNav emitting 2021-12-25 but I get **rCalendarMonth** onClickDateMonth emitting 2021-12-25 ie the handler on the main month component responds. If I select the Week view and do the same thing I get **rCalendarWeek** onClickDateWeek emitting 2021-12-25 ie the handler on the Week view responds.

Thanks again.
Murray

[flowt-au]

I am guessing that since with v-if there is only one instance alive, by adding the mini month I have 2 instances and that is the same situation as using v-show. So the question is, how to have multiple instances?

[flowt-au]

Thanks Jeff. That would be great. Whenever you can. :-)
Go well,
Murray

[flowt-au]

@hawkeye64 Hi Jeff. I am wondering whether you have had a chance to look at this question yet? Thanks, Go well, Murray.

[hawkeye64]

@flowt-au unfortunately, I have not. I'm quite overextended right now. We have a long weekend coming up. I'll see if I can free up some time. Again, apologies.

[flowt-au]

@hawkeye64 Thanks Jeff. No worries. I have put it aside for the moment while working on other things and if it becomes critical I will see if I can fix it myself. :-)
Go well, Murray

[hawkeye64]

Sorry, I haven't found time to even test this. Things got busy at work after a dev left, then I got an offer I couldn't refuse, so I am leaving. In February, I put in 200+ hours of work instead of 160. :(