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}`
}

<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>

<symboltwitter></symboltwitter>

<symboltwitter></symboltwitter>

<symboltwitter></symboltwitter> but not rendering

Dynamic components not rendering

Similar Threads

Similar Threads

Similar Threads