Include components by condition

I have a large number of components defined on the server. Example:

Paragraph component (can only contain text) Quote component (may include author and quote text) ...

When a click on a given component on a web page (e.g., a quote) retrieves specific data for that component from the server, and I need to display specific fields (vue components) in the sidebar, depending on the type of component.

The problem is, moreover, that I do not know what kind of components you'll need to see before (there may be a quote request that will contain two paragraphs ...).

How do I get to dynamically display only a certain vue component and in the order that is required?

So far, I have this solution, but it is not ideal at all. If you know something better, I'll be grateful.

<template v-for="(field, index) in fields">
    <my-textarea v-if ="field.type=='textarea'">...</ my-textarea>
    <my-gallery v-if="field.type=='gallery'">...</ my-gallery>
</ template>

Reached

7 years ago

Level 11

I would use lazy loading of your components, this way Vue will only fetch what is needed, an example:

const MultiLevelDonutChart = () => import('./Charts/MultiLevelDonutChart.vue');

Then import it in the main component where you want to use it:

export default {
    components: {
        'multi-level-donut-chart': MultiLevelDonutChart
    }
    ...
}

You might have to use babel-dynamic-import to make this work though :)

realrandyallen

7 years ago

Level 44

Honestly I probably would have done it the exact way you have, ordering could be an issue I suppose but it seems like a good solution to me

Please or to participate in this conversation.