I am encountering an issue with my Vue component that features Tabs (bootstrap-vue). Within each tab, there are radio buttons with dynamically populated labels using the v-html property. The problem occurs when I switch between tabs, as the appendPresetHtml() method is called each time and causes overlapping HTML content. I want to optimize this so that the method is only called once for each radio button, and there is no unnecessary overlap or re-population of content. Ideally, the method should only be triggered if the content is not present already. I have been trying to generate dynamic HTML within the appendPresetHtml method and append it to a specific div, but it is not functioning as expected.
<b-tabs id="presets-tab" pills class="consent-type-tab" v-model="tabIndex">
<b-tab v-for="bannerDesign in availableBannerDesigns" :key="bannerDesign">
<b-form-radio-group name="preset-list" v-model="selectedPreset.id">
<template v-for="(preset, index) in templatePresets">
<b-form-radio :value="preset.id" :key="preset.name" v-if="filteredPresets(preset, bannerDesign)" :disabled="isRecommendedPresetDisabled(preset)" @change="selectPreset(preset, index)">
<div v-html="appendPresetHtml(preset)" :id="'preset-box-'+ preset.id" :class="[ 'preset-'+ preset.settings.theme, isRecommendedPresetDisabled(preset) ? 'radio-opacity preset-'+ preset.settings.consentBarType : 'preset-'+ preset.settings.consentBarType,]"></div>
</b-form-radio>
</template>
</b-form-radio-group>
</b-tab>
</b-tabs>