N
Nuxtβ€’3y ago
rich

Dynamic components not rendering

I'm wondering why the following code wouldn't work. It's not rendering the components (which are within /components/symbol/Twitter.vue, for example) 
<li v-for="(link, index) in links" :key="index">
  <a :href="link.url" target="_blank"><component :is="socialComponent(link.title)"></component></a></li>

const socialComponent = (title) => {
    return `Symbol${title}`
}
<li v-for="(link, index) in links" :key="index">
  <a :href="link.url" target="_blank"><component :is="socialComponent(link.title)"></component></a></li>

const socialComponent = (title) => {
    return `Symbol${title}`
}
If I inspect it's running as <symboltwitter></symboltwitter> but not rendering
1 Reply
rich
richOPβ€’3y ago
Yep exactly So the components are /components/symbol/Twitter.vue and Facebook.vue etc. link.title simply outputs a string 'Twitter' or 'Facebook' So if I write the component directly as <SymbolTwitter /> it works But ideally wanted it to be dynamic Each component has an outputted SVG so thought it would be cleaner doing it like this but maybe that's a good point For example, Instagram.vue looks like the following 
<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.63 41.55"><path d="m41.5,12.2c-.1-2.21-.45-3.72-.97-5.04-.53-1.37-1.24-2.53-2.4-3.68-1.15-1.16-2.31-1.87-3.68-2.4-1.32-.51-2.83-.87-5.04-.97-2.22-.1-2.92-.12-8.58-.12s-6.36.02-8.58.12c-2.21.1-3.72.45-5.06.97-1.37.53-2.52,1.24-3.68,2.4-1.16,1.15-1.87,2.31-2.4,3.68-.51,1.32-.87,2.83-.97,5.04-.1,2.22-.13,2.93-.13,8.57s.02,6.35.13,8.57c.1,2.21.45,3.72.97,5.05.53,1.37,1.24,2.53,2.4,3.68,1.16,1.16,2.31,1.87,3.68,2.4,1.32.51,2.83.87,5.06.97,2.22.1,2.92.12,8.58.12s6.36-.02,8.58-.12c2.21-.1,3.72-.45,5.04-.97,1.37-.53,2.53-1.24,3.68-2.4,1.16-1.16,1.87-2.31,2.4-3.68.51-1.32.87-2.83.97-5.05.1-2.22.13-2.92.13-8.57s-.02-6.35-.13-8.57Zm-3.74,16.96c-.09,2.03-.43,3.13-.72,3.86-.38.97-.83,1.66-1.56,2.39-.73.73-1.42,1.18-2.39,1.55-.73.28-1.83.62-3.86.72-2.19.1-2.85.12-8.41.12s-6.22-.02-8.41-.12c-2.03-.09-3.13-.43-3.86-.72-.97-.38-1.66-.83-2.39-1.55-.73-.73-1.18-1.42-1.56-2.39-.28-.73-.62-1.83-.72-3.86-.1-2.19-.12-2.85-.12-8.4s.02-6.21.12-8.4c.09-2.03.43-3.13.72-3.86.38-.97.83-1.66,1.56-2.39.73-.73,1.42-1.18,2.39-1.55.73-.28,1.83-.62,3.86-.72,2.19-.1,2.85-.12,8.41-.12s6.22.02,8.41.12c2.03.09,3.13.43,3.86.72.97.38,1.66.83,2.39,1.55.73.73,1.18,1.42,1.56,2.39.28.73.62,1.83.72,3.86.1,2.19.12,2.85.12,8.4s-.02,6.21-.12,8.4Z"/><path d="m31.93,12.17c-1.38,0-2.5-1.12-2.5-2.49s1.12-2.49,2.5-2.49,2.49,1.12,2.49,2.49-1.12,2.49-2.49,2.49Z"/><path d="m20.82,10.11c-5.9,0-10.68,4.78-10.68,10.67s4.79,10.67,10.68,10.67,10.68-4.78,10.68-10.67-4.79-10.67-10.68-10.67Zm0,17.59c-3.83,0-6.94-3.1-6.94-6.93s3.1-6.93,6.94-6.93,6.94,3.1,6.94,6.93-3.1,6.93-6.94,6.93Z"/></svg>
</template>
<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.63 41.55"><path d="m41.5,12.2c-.1-2.21-.45-3.72-.97-5.04-.53-1.37-1.24-2.53-2.4-3.68-1.15-1.16-2.31-1.87-3.68-2.4-1.32-.51-2.83-.87-5.04-.97-2.22-.1-2.92-.12-8.58-.12s-6.36.02-8.58.12c-2.21.1-3.72.45-5.06.97-1.37.53-2.52,1.24-3.68,2.4-1.16,1.15-1.87,2.31-2.4,3.68-.51,1.32-.87,2.83-.97,5.04-.1,2.22-.13,2.93-.13,8.57s.02,6.35.13,8.57c.1,2.21.45,3.72.97,5.05.53,1.37,1.24,2.53,2.4,3.68,1.16,1.16,2.31,1.87,3.68,2.4,1.32.51,2.83.87,5.06.97,2.22.1,2.92.12,8.58.12s6.36-.02,8.58-.12c2.21-.1,3.72-.45,5.04-.97,1.37-.53,2.53-1.24,3.68-2.4,1.16-1.16,1.87-2.31,2.4-3.68.51-1.32.87-2.83.97-5.05.1-2.22.13-2.92.13-8.57s-.02-6.35-.13-8.57Zm-3.74,16.96c-.09,2.03-.43,3.13-.72,3.86-.38.97-.83,1.66-1.56,2.39-.73.73-1.42,1.18-2.39,1.55-.73.28-1.83.62-3.86.72-2.19.1-2.85.12-8.41.12s-6.22-.02-8.41-.12c-2.03-.09-3.13-.43-3.86-.72-.97-.38-1.66-.83-2.39-1.55-.73-.73-1.18-1.42-1.56-2.39-.28-.73-.62-1.83-.72-3.86-.1-2.19-.12-2.85-.12-8.4s.02-6.21.12-8.4c.09-2.03.43-3.13.72-3.86.38-.97.83-1.66,1.56-2.39.73-.73,1.42-1.18,2.39-1.55.73-.28,1.83-.62,3.86-.72,2.19-.1,2.85-.12,8.41-.12s6.22.02,8.41.12c2.03.09,3.13.43,3.86.72.97.38,1.66.83,2.39,1.55.73.73,1.18,1.42,1.56,2.39.28.73.62,1.83.72,3.86.1,2.19.12,2.85.12,8.4s-.02,6.21-.12,8.4Z"/><path d="m31.93,12.17c-1.38,0-2.5-1.12-2.5-2.49s1.12-2.49,2.5-2.49,2.49,1.12,2.49,2.49-1.12,2.49-2.49,2.49Z"/><path d="m20.82,10.11c-5.9,0-10.68,4.78-10.68,10.67s4.79,10.67,10.68,10.67,10.68-4.78,10.68-10.67-4.79-10.67-10.68-10.67Zm0,17.59c-3.83,0-6.94-3.1-6.94-6.93s3.1-6.93,6.94-6.93,6.94,3.1,6.94,6.93-3.1,6.93-6.94,6.93Z"/></svg>
</template>
So I thought this all inline would get messy quickly But maybe not Good idea Okay I'll try with that! πŸ™‚ That's super appreciated advice Yeah haha πŸ™‚ Not sure why the original question wasn't working but alas

Did you find this page helpful?