Intentando cargar componentes dinámicos basados en una cadena.
Debería verse algo como esto:
<component v-for="component in components" :is="eval(component)" />Pero desafortunadamente esto no funciona.
La solución que estoy usando por ahora es crear una función que devuelva el componente:
<script setup> import BarChart from '@/components/BarChart.vue' const components = ['BarChart'] const stringToComponent = component => { return eval(component) } </script> <template> <component v-for="component in components" :is="stringToComponent(component)" /> </template>¿Por qué llamar a eval directamente no funciona y es posible evitar crear una función?
Agregue el componente a la matriz sin definir como cadena const components = [BarChart] :
<script setup> import BarChart from '@/components/BarChart.vue' const components = [BarChart] </script> <template> <component v-for="component in components" :is="component" /> </template>