HTML Parent File
<div v-if="!refresh" class="c-focus-mode">
<div class="c-focus-mode__container">
<div class="c-focus-mode__container-left">
<slide-card
focus
hideBottom
:slideID="slideID"
:index="orderIndex"
:totalCount="5"
:totalDuration="10"
:isMobile="false"
>
// Not working (1)
<template v-slot:prevSlideBtnLeft>
<app-button
v-if="!prevInvalid"
type="circular"
class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
@click="goToSlide(-1)"
><app-icon name="chevron-left"></app-icon>
</app-button>
</template>
<template v-slot:nextSlideBtnRight>
<app-button
v-if="!nextInvalid"
type="circular"
class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
@click="goToSlide(1)"
><app-icon name="chevron-right"></app-icon>
</app-button>
</template>
</slide-card>
// Working below (2)
<div
class="c-focus-mode__container-left-navigation"
:class="{['c-focus-mode__container-left-navigation--no-prev']: prevInvalid}"
>
<app-button
v-if="!prevInvalid"
type="circular"
class="c-slide-card-preview__btn c-slide-card-preview__btn--prev"
@click="goToSlide(-1)"
><app-icon name="chevron-left"></app-icon>
</app-button>
<app-button
v-if="!nextInvalid"
type="circular"
class="c-slide-card-preview__btn c-slide-card-preview__btn--next"
@click="goToSlide(1)"
><app-icon name="chevron-right"></app-icon>
</app-button>
</div>
</div>
<slide-card
focus
hideTop
:slideID="slideID"
:index="orderIndex"
:totalCount="5"
:totalDuration="10"
:isMobile="false"
>
</slide-card>
</div>
</div>
Functions triggered by the app-button components
public goToSlide(increment) {
const newIndex = this.orderIndex + increment;
if (newIndex < 0 || newIndex >= this.deckSlides.length) {
return;
}
this.setActiveSlide(newIndex);
}
private setActiveSlide(index) {
this.slideIndex = index + 1;
const { deckID, ID: slideID } = this.deckSlides[index];
if (deckID && slideID) {
this.$store.dispatch('deck/setActiveSlides', { deckID, slideID });
history.replaceState({}, null, `/d/${this.deckID}/edit/focus/${index + 1}`);
}
}
When goToSlide is called from the buttons at "Works below (2)", the store is updated successfully. However, when the same function is called from the buttons at "Not working (1)", the store is not updated. This issue also occurs when trying to trigger the goToSlide function in the parent component from the child component slide-card.