Can a Component be named from data? - vue.js

Question

I have three component icons <DiscoverIcon>, <FeedIcon>, <ProfileIcon> and in tab loop I want to be able to use a different Icon for each respective title.
I tried a list element like
{ key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'}
and calling {{ link.icon }} and also
{ key: 1, text: 'Discover', route: '/discover'}
and calling <div class='iconbgd'><{{link.text}}Icon /></div>
<template>
<v-tabs fixed-tabs>
<v-tab
v-for="link in links"
:key="link.key"
>
<div class='iconbgd'><{{link.text}}Icon /></div><h4>{{ link.text }}</h4>
</v-tab>
</v-tabs>
</template>
<script>
import DiscoverIcon from '../components/icons/DiscoverIcon'
import FeedIcon from '../components/icons/FeedIcon'
import ProfileIcon from '../components/icons/ProfileIcon'
export default {
components: {
DiscoverIcon,
FeedIcon,
ProfileIcon
},
name: 'App',
data () {
return {
links: [
{ key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'},
{ key: 2, icon: <div class='iconbgd'><FeedIcon /></div>, text: 'Feed', route: '/feed'},
{ key: 3, icon: <div class='iconbgd'><ProfileIcon /></div>, text: 'Profile', route: '/profile'}
]
}
}
}
</script>
<style>
.iconbgd svg{
fill:url(#grad1);
width: 30px;
height: auto;
padding-right: 5px;
}
</style>
This is the Vuetify tabs component for this use case but getting it working isn't connected with using tabs but my expected result is to be able to loop through and in each tab use a different correlated component rather than just create three separate buttons which I currently have.

Answer 1

First of all {{link.icon}} is not is meant to be displayed as HTML. You should use a different approach.
<div class='iconbgd'><{{link.text}}Icon /> is equal to <div class='iconbgd' v-text="link.text"><Icon />. Therefore Vue has a v-html directive for HTML, you can read here more about the varieties of directives.
Still try to avoid v-html, when possible and since the different {{link.icon}} are very similar you could make it easily work without v-html.
This looks like you are trying to bind components <{{link.text}}Icon />. Dynamic components are what you looking for and they are very powerful.
I quickly looked into the Vuetify documentation for v-tabs and changed it a bit, however I have never used it before and this is not tested. It should be what you are trying to accomplish:
<template>
<v-tabs fixed-tabs>
<v-tab v-for="link in links" :key="link.key">
<div class="iconbgd">{{link.label}}</div>
</v-tab>
<v-tab-item v-for="link in links" :key="link.key">
<h4>{{link.label}}</h4>
<component :is="link.label + 'Icon'" :key="link.key"/>
</v-tab-item>
</v-tabs>
</template>
<script>
import DiscoverIcon from '../components/icons/DiscoverIcon';
import FeedIcon from '../components/icons/FeedIcon';
import ProfileIcon from '../components/icons/ProfileIcon';
export default {
data() {
return {
links: [
{
key: 1,
label: 'Discover',
route: '/discover'
},
{
key: 2,
label: 'Feed',
route: '/feed'
},
{
key: 3,
label: 'Profile',
route: '/profile'
}
]
};
},
name: 'App',
components: {
DiscoverIcon,
FeedIcon,
ProfileIcon
}
};
</script>
<style>
.iconbgd svg {
fill: url(#grad1);
width: 30px;
height: auto;
padding-right: 5px;
}
</style>

Answer 2

Thank you so much! A few tweaks to that and it's working.
<v-tabs fixed-tabs color='transparent' slider-color='#1341B2'>
<v-tab v-for="link in links" :key="link.key" :to="link.route">
<div class="iconbgd">
<component :is="link.label + 'Icon'" :key="link.key"/>
</div>
<h4>{{link.label}}</h4>
</v-tab>
</v-tabs>