In my project, I have three component icons named <DiscoverIcon>, <FeedIcon>, and <ProfileIcon>. In a tab loop, I want to display a different icon for each respective title.
I experimented with using a list element like this:
{ key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'}and tried calling {{ link.icon }} as well as
{ key: 1, text: 'Discover', route: '/discover'}along with 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>
The goal here is to implement the Vuetify tabs component in a way that allows me to cycle through different icons within each tab instead of simply creating separate buttons as currently done.