I have a significant issue with a component that needs to be repeated multiple times in the parent template due to the usage of v-if. The component code is as follows:
<SelectCard
v-for="(channel, index) in category.visibleChannels"
:key="index + '-' + channel.id"
:channel="channel"
:channel-selected="isSelected(channel.id)"
:read-more-details="channelInfoDetails"
@select="onAddChannel"
@deselect="onRemoveChannel"
@read-more-changed="setChannelInfoDetails"
/>
The only variation between each render of the template is the array that I loop over.... Here is a simplified version of the problem:
<template>
<div
ref="channels"
class="channels"
>
<div v-if="showCategories">
<div
v-for="category in sliderCategories"
:key="category.name"
>
<h3 v-text="category.name" />
<div
v-if="category.showAll"
class="channel-list show-all"
:class="channelListSize"
>
<ul>
<SelectCard looping over category.contents />
</ul>
</div>
<ChannelSlider
v-else
:category="category"
@visible-updated="setVisibleChannels"
>
<SelectCard looping over category.visibleChannels />
</ChannelSlider>
<div class="show-all-link">
<a
:class="category.showAll?'arrow-up':'arrow-down'"
class="link"
@keyup.enter="toggleShowAll(category.name, !category.showAll)"
@click="toggleShowAll(category.name, !category.showAll)"
v-text="showAllText(category.showAll)"
/>
</div>
</div>
</div>
<div v-else>
<div v-if="showNoSearchResult">
<SomeComponent with some props/>
</div>
<div :class="channelListSize" class="channel-list">
<ul>
<SelectCard looping over updatedChannels />
</ul>
</div>
</div>
<div
ref="someref"
class="someClass"
:style="{top: channelInfoDetails.top + 'px', position: 'absolute'}"
>
<AnotherComponent with some props/>
</div>
</div>
</template>
As a result of numerous props in SelectCard code, my template has become extensive.
I am looking for a way to encapsulate SelectCard in a method within the parent code so that I can easily call a function with the desired array. Are there any alternative solutions that could help address this issue?