Within my application, I have implemented a feature where users can customize the appearance of social media links on their page by defining which platforms they want to include. Each social media platform is represented by its own component responsible for generating the link dynamically.
For example:
<script setup>
import LinkToInstagram from './socialmedia/LinkToInstagram.vue'
import LinkToFacebook from './socialmedia/LinkToFacebook.vue'
//These components will be loaded through an API
const links = [
'Instagram',
'Facebook'
]
</script>
<template>
<span v-for="social in links" :set="currentComponent = 'LinkTo' + social">
<component :is="currentComponent" show-link-text="true" slug="example" />
</span>
</template>
<style scoped>
</style>
The expected output should resemble:
<LinkToInstagram show-link-text="true" slug="example"></LinkToInstagram>
And Vue should load the appropriate component accordingly.
However, the current output displays:
<linktoinstagram show-link-text="true" slug="example"></linktoinstagram>
with all lowercase and no functionality.
I attempted using kebab-case without success. When I printed the variable currentComponent, it showed the correct value:
LinkToInstagram (camelCase). Am I using the :is attribute correctly, or am I misunderstanding its purpose?
If I manually code <LinkToInstagram ... />, everything functions as intended.