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?

Mysterdev · Accepted Answer · 2022-02-17 08:25:41Z

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

answered Feb 17, 2022 at 8:25

Mysterdev

2613 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mysterdev Over a year ago

If you use vuejs 3 you can use Suspense vueschool.io/articles/vuejs-tutorials/…

Samuel Mendes Over a year ago

Thanks for the reply @Mysterdev, yeah I tried not to be that confusing sorry.

Samuel Mendes Over a year ago

But the idea was to have like an recursive component, like: Content (1) --Content (2) ----Content (3) ------Content (4) ... and so on. And imagine that you trigger an action inside Content (3) that you want to fetch new structure from API, you should only be rendering the new data inside Content (3) and don't change the parents above. Not sure if It was more clear or not. And thanks for the that article about Suspense I didn't know about it !! :)

Mysterdev Over a year ago

if I understood correctly you want only one of the components to be updated but not the others if that's right, look at v-memo vuejs.org/api/built-in-directives.html#v-memo

Samuel Mendes Over a year ago

Oh sorry, I thought I have replied to the comment. Thanks Mysterdev that solved my issue!!

Collectives™ on Stack Overflow

VueJS dynamic content

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related