VueJS dynamic content

Question

I'm still quite new to the world of Vue so I've been struggling a little with the task I have in hands.

Let me explain what should it be doing:
So we have a JSON structure that comes from our API, and the idea is to create a dynamic "Content Component" that will fetch data from the JSON and will say to the component how it is going to be build up the layout.

I've created dynamic component that loads correctly the structure that comes from the API, that looks like the image bellow:

Content diagram

So imagine that we have 2 sections, one with a simple form (left section in photo) and other section with, lets say a "List Component", see code:

This is my "Content Component":

 <template>
    <main class="dynamic-component" v-if="structure.view">
        <ContentHeader v-if="structure.view.actions" :actions="structure.view.actions"></ContentHeader>
        <ContentBody :structure="structure" :key="componentKey" :componentKey="componentKey" @force-render="forceRerender"></ContentBody>
    </main>
</template>

The "ContentBody" is here I parse the structure that comes from JSON, and this part is where I create the section with the "List Component":

<template v-if="section.url" v-slot:card-body>
  <Content :key="componentKey" :targetPath="section.url">
  </Content>
</template>

Its calling the parent component (Content) again, because Content is the dynamic component like I said before and the targetPath is to fetch data from JSON, this is returning the data to build a "List Component".

Like this: layout

My problem is when that List/Form component has actions(view, edit...) to be triggered, how can I trigger them "inside" the component and render only the SECTION and not all the page?

Answer 1

I didn't quite understand your question, but I think you'll need: Dynamic component https://v2.vuejs.org/v2/guide/components-dynamic-async.html

Or simple call component with condition v-if with a computed