I am working on creating an array of Vue Components based on a configuration file containing various UI sections to display;
const config = [
'summarySection',
'scoreSection',
'educationSection'
]
I am attempting to map this into an array of Vue components that can be utilized in my template. My initial approach was like so;
const availableComponents = {
'summarySection': <summary-section/ >,
'scoreSection': <score-section/>,
...
}
const sections = config.map((section) => availableComponents[section])
<template v-for="section in sections">
{{ section }}
</template>
However, it seems this method does not work as intended. Any ideas for a solution?
SOLUTION
Here is the solution I came up with;
// In my config file;
const sections = [
'profile-summary-section',
'matchbars-section',
'job-experience-section',
'education-section',
'skills-section',
'about-section',
'availability-section',
'recruiter-notes-section',
'transport-section',
]
// In my template;
<template v-for="section in sections">
<component :is="section" :key="section" v-bind="sectionProps[section]"></component>
</template>
// In my computed variables;
sectionProps() {
return {
'profile-summary-section': {
vIf: this.showSummary,
class: 'mb-2 has-light-border bg-white',
profile: this.profile,
number: 0,
showMatchPercentage: false,
},
'matchbars-section': {
...
},
};
},