Skip to content

Instantly share code, notes, and snippets.

@EduardoAC
Last active March 29, 2025 15:39
Show Gist options
  • Save EduardoAC/965c7d0ede07741e012ac1a235be9cd9 to your computer and use it in GitHub Desktop.
Save EduardoAC/965c7d0ede07741e012ac1a235be9cd9 to your computer and use it in GitHub Desktop.
Using a Dynamic Component - This approach allows the label to be rendered as a dynamic component inside RadioButtonGroup.
<template>
<div class="radio-button-group">
<div
v-for="option in optionList"
:key="option.value"
:disabled="option.disabled"
:class="{ 'option--active': selected === type.value }"
>
<div v-if="option.icon" :class="option.icon" />
<component :is="option.label" />
</div>
</div>
</template>
<template>
<RadioButtonGroup :optionList="suggestDepositAmounts" />
</template>
<script>
const suggestDepositAmounts = [
{
value: "100",
label: h(CustomElement, { labelText: "100 RSD" }),
}
];
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment