In my setup, the parent component utilizes <Spinner /> to pass on the spinner size as size="sm" to the child component.
Here is how the parent component appears:
<template>
<div v-if="isPending">
<Spinner size="sm" />
<span> Loading data...</span>
</div>
</template>
This is what the child component contains:
<template>
<span class="spinner-border spinner-border-{{ size }}"></span>
</template>
<script>
export default {
props: ['size']
}
</script>
An issue arises with the child component as it throws an error due to
class="spinner-border spinner-border-{{ size }}"sm in spinner-border-.
I am seeking a more sophisticated approach to solely append the size suffix sm (without adding the complete spinner-border-sm class).