Is there a way to implement dynamic imports for all 3 components in this scenario? Each component has different props, so using the switch option in the computed method is not feasible.
I have come across solutions for using a single component dynamically, but I haven't found an example where multiple components can be imported based on conditions. While inspecting the UI, it appears that my component is not being loaded due to the v-if condition. However, checking the Network tab reveals that the component is actually imported.
Here is the template:
<template>
<div>
<b-button v-if="condition1" v-b-toggle.collapse-1 variant="primary">Component1</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<component :is="condition1" :data1 = "data.cond1" />
</b-card>
</b-collapse>
<b-button v-if="condition2" v-b-toggle.collapse-2 variant="primary">Component2</b-button>
<b-collapse id="collapse-2" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<component :is="condition2" :data2 = "data.cond2" />
</b-card>
</b-collapse>
<b-button v-if="condition3" v-b-toggle.collapse-3 variant="primary">Component3</b-button>
<b-collapse id="collapse-3" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<component :is="condition3" :data3 = "data.cond3" />
</b-card>
</b-collapse>
</div>
</template>
Code:
<script>
export default {
props: {
component: String,
},
data() {
},
computed: {
condition1() {
const condition1 = true;
if(condition1){
return () => import(`../components/component1`);
}
},
condition2() {
const condition2 = false;
if(condition2){
return () => import(`../components/component2`);
}
},
condition3() {
const condition3 = true;
if(condition3){
return () => import(`../components/component3`);
}
},
},
created() {
},
},
}
</script>
I encountered an error when trying this implementation:
> Unknown custom element:<component> - did you register the component
> correctly? For recursive components, make sure to provide the "name"
> option.
It works fine with one condition, but throws an error when attempting multiple conditions and components.
Thank you for your assistance @power-cut.
Considering the expandable structure that requires displaying components separately, the single component approach is not suitable.