79693969

Date: 2025-07-08 09:18:32
Score: 0.5
Natty:
Report link

The code doesn't work as you are passing a string into the component as a prop, rather of the actual Vue component
What you can do is to try to store all the components in a JS Object with IDs assigned to it and use a function to call them. An Example code will be like this →

Working Code → https://play.vuejs.org/#eNrVVUtz2zYQ/isoL0qm4ZuSbVnxTON6WncU11N7cmjZA0RCFGwQYAFQj2T837sLirLk1ymXzNij3f12P+xT+ub90jTBsmXe2JuYQvPGEsNs25zlkteN0pZMFS25rC4LJclcq5oMgnDPhsGD053376pmB669offLJSjGEg4f5wqCJJP2V2op+Ui+5ZKQAXpfC2pqXg7GffgHB4nu3cF4L4FcPiDrvJWF5fCwhvS1vNaqYdpl8u6ebd476g56/vQ/4PHvlmcSdm2ABoBiWd0IahlohEyKPoiMufmYe0+feudyH5CfyaAv4H3unU3CXSDwTMI9Uu+DZw3EzHkV3BklYQwu09zDEC6Y/rPBqkzujbv2IEaFUKs/nM3qlrneuJgFK+5fsN+ZNdpy71ozw/SS5d4Os1RXzHbwxc0VW4O8A2tVtgK83wD/YkaJFnPs3D61soS09/xctpduPWBkt+ZibZk0fVGYKHo+OP/cgzXB2bxW+mO6aZC5OJgbdPHJRj5b57fGWvKlE0A0y4qsayFxugtrm3EYrlarYJUGSldhEkVRCC65R1a8tAtwShNQFoxXC9trS85Wn9Qa1IhEJMngD5fgJ98nj5fxGV7XnAoy5ZI5uyGzDflyR2GIRtAludWtWdxzSXyCmRhIpeJ20c4CWI2w2MyYpoIzGQpg8OsynAk1C2tqgBhsBfSYBXZtie+fTSoy50JAShLWEHI0Vqt7BnrRag17ea6Egplt7T5SFrTBFVcwz0PgTnH5HOkbAh04mzTULnqgpGZBtaYbAOPRYwDa1XwO4+mBEoTPcULSIgtOjqB3JyQLohQ+TpCUwncMdK2vZK4Z+4q1UGs1n7WWXdEaS3rGj9StxnkEKWwTWVLRMpxwPDqNci/cUd9qKs1c6foZp+2RHVccDJFLs4ZRaF8rsQwuSzbnklvMy24aDNXKAvX+sxGBIuPkNB1tJZdDiE17vXUjWKIXW7cPqIYW3KJ7kL7d0CICEWz+1uCjDRTnBkpnRwFdO6A3ofHv7zOROEgOJjLKthPZdiOs8HKXVXeoYXepT79B939ifpzDv9nUMyXc1f+mVCXYy4deOQzuugvzS2Z4JX38DTMHJz+9PL+4urlw5+6WaDuVJxfudgJSi5f+SZAeDadJACuYTmMSx0E2xW0RcUyOg0z4MB0Ce340RPEY/tPhlyT+Wmf+6D8/yJIhifzgKE78IDk+vj0icWZRcrbbY2C1IKUOPEHQ+aEJwWGdkegFGnj8gAcvZI8oTg+ZEH6VaviEanRI5TLeowJ42G3f2yv38D+cmOxP

<script setup>
import LoadingIcon from './LoadingIcon.vue';
import HomeIcon from './HomeIcon.vue';

const iconComponentData = {
  'IconPlasmid':HomeIcon,
  'loading':LoadingIcon
}

function returnProperIcon (key){
  return iconComponentData[key]
}

</script>

<template>
  <component :is="returnProperIcon('Icon' + 'Plasmid')"></component>
</template>

Welcome to the Vue Ecosystem, Happy coding !

Reasons:
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: jesvin palatty