I am currently rendering a list.
<div v-for="msg in messages">
<div v-if="msg.type==='component'">
<component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component>
</div>
</div>
While I can successfully import and load a component using a computed property with a hardcoded name, I face difficulty in passing a parameter into a computed property.
Attempting to call a method instead results in an infinite loop causing the browser to crash.
//This works as a computed property
getComponent() {
return () => import(`@/components/data/finance/GRNISummary.vue`)
},
//This does not work as a computed property. Computed properties cannot accept parameters
getComponent(component) {
const componentsList = {
jurisdictionEvidenceCount: '/chart/export_control/JurisdictionEvidenceCount.vue',
grniSummary: '/data/finance/GRNISummary.vue'
}
return () => import(`@/components` + componentsList[component])
},
//This method crashes the browser with an infinite loop of component loads
getComponent(component) {
const componentsList = {
jurisdictionEvidenceCount: '/chart/export_control/JurisdictionEvidenceCount.vue',
grniSummary: '/data/finance/GRNISummary.vue'
}
return () => import(`@/components` + componentsList[component])
},