[Vuejs]-Vue 3 <Component :is=""> somehow turns camelCase in to lowercase

by

2👍

✅

As you are importing components, you can simply use them as values:

<script setup>
  import LinkToInstagram from './socialmedia/LinkToInstagram.vue'
  import LinkToFacebook  from './socialmedia/LinkToFacebook.vue'
  //This will be loaded through an API
  const links = [
    'Instagram',
    'Facebook'
  ]
  const componentMap = {
    Instagram: LinkToInstagram,
    Facebook: LinkToFacebook,
  }
</script>

<template>
  <span v-for="link of links" :key="link">
    <component :is="componentMap[link]" show-link-text="true" slug="itest" />
  </span>
</template>
👤Dimava

Leave a comment