Dynamically Rebuild the Component

[Christian DAquino]

Hi,

I have a page with the kanban component, and the users can select different "boards" from that page. Each board has a completely different set of columns and cards. Now, the way I'm currently doing this is, once the user selects a "board":

1. Fetch the board data from the API;
2. Destroy each column through the method deleteColumn(key)
3. Update the dataSource
4. Recreate each new column with the method addColumn({...})

Although it works, the problem is that there are a lot of columns (each board has around 30) and a lot of cards (each board has around 200-300 cards). So it takes a long time, and a lot of memory, for that to work. And it's pretty standard for the browser to freeze midway through.

Is there a more efficient way of dynamically modifying the components data? I believe deleting the columns one by one seems to be the main issue, considering that it doesn't take that long to populate the first "board".

[Christian DAquino]

Any thoughts?

[Kokila Poovendran]

Hi Christian DAquino,

Thank you for reaching out to us.

Upon reviewing your query, we have created a sample based on the details provided and did not observe any performance issues with dynamically modifying the Kanban component's data. Please find the sample for reference:

Sample: https://stackblitz.com/edit/sqttj6gp-j4b5ubac?file=src%2FApp.vue

To assist you further, could you please share the complete code snippet you are using along with a video reference of the issue? Providing these details will help us better understand the scenario and offer a more efficient solution.

We look forward to your response.