Guide on integrating an element into a different element in a Vue 3 Tree Viewer

Question

Guide on integrating an element into a different element in a Vue 3 Tree Viewer

In my current setup, I've implemented a TreeView component that holds a tree. Each tree entry includes Children with their own unique label, perm, and further children.

Take a look at an example of the tree:

App.vue

let tree = ref({
  label: 'org',
  perm: {
    POST: "auth",
    GET: "null"
  },
  children: [
    {
      label: '*',
      perm: {
        POST: "auth",
        GET: "null"
      },
      children: [{
        label: 'repo',
        perm: {
          POST: "null",
          GET: "null"
        },
        children: []
      }]
    },
    {
      label: 'test',
      perm: {
        POST: "auth",
        GET: "auth"
      },
      children: []
    }
  ]
})

To display this in a simple Tree View, I'm using the following setup:

TreeView.vue

 <div @click="toggleHideShow()"> 
     {{ label }}
 </div>
 <div class="child" v-if="hideShow">
     <TreeView v-for="child in children" :label="child.label" :perm="child.perm" :children="child.children" />
 </div>

My goal is to be able to dynamically add children through this TreeView. Is there a way for me to access the exact Children object upon clicking?

Currently, I attempted to pass attributes through the toggleHideShow method:

 <div @click="toggleHideShow(label, perm, children)">

After that, I create a new Children object, iterate through the tree, and compare each one to find the matching object.

const toggleHideShow = (label: string, perm: Perm, children?: Array<Children>)=> {
    hideShow.value = !hideShow.value
    const newChild: Children = {
        label: label,
        perm: perm,
        children: children
    }

    //do for loop here
}

The issue arises from my tree variable being declared in App.vue, which I then pass into my TreeView component.

<TreeView :label="tree.label" :perm="tree.perm" :children="tree.children" />

Here are my three questions:

1: How can I access the tree variable within my TreeView component? Will modifying it also alter the tree variable inside App.vue, therefore updating the TreeView dynamically?

2: Would it be more efficient to create a method within App.vue that takes in the newly created newChild variable as a parameter and adds it to the tree from there? If so, how would I implement this method in my TreeView component?

3: Are there other methods for me to identify the specific Children object within the tree that was clicked on? And how can I retrieve it from the tree variable considering it's not an array?

typescript vue.js treeview

Answer 1

Answer №1

When dealing with recursion, every change made to a child has ripple effects at the parent level. For instance, if you are 2 levels deep, updating the child triggers a chain reaction where the parent and grandparent also need updates.

This pattern persists even when navigating 10 levels deep.
The common assumption is that performance would suffer under this system, but in reality, Vue efficiently handles change detection and rendering.

The real challenge lies in debugging. When errors surface at a certain depth, pinpointing the issue becomes a daunting task.

A simpler alternative is recommended:

Place all items in a flat array and assign unique identifiers
Rather than nesting items within children, refer to them using their ids only

With this approach, updating an item does not necessitate notifications to its lineage.

An item editor can easily modify the currently selected item without concerns about cascading changes or broadcasting updates across levels.

Check out the working demo: https://codesandbox.io/s/editable-tree-bo6msx?file=/src/App.vue

To keep things organized, the tree logic is abstracted into a store that offers methods for adding/removing/editing tree items.

This method's flexibility allows for potential modification to support multiple parents for an item if needed (mainly tweaking the removeChild method to search for all parents).

Answer 2

When dealing with recursion, every change made to a child has ripple effects at the parent level. For instance, if you are 2 levels deep, updating the child triggers a chain reaction where the parent and grandparent also need updates.

This pattern persists even when navigating 10 levels deep.
The common assumption is that performance would suffer under this system, but in reality, Vue efficiently handles change detection and rendering.

The real challenge lies in debugging. When errors surface at a certain depth, pinpointing the issue becomes a daunting task.

A simpler alternative is recommended:

Place all items in a flat array and assign unique identifiers
Rather than nesting items within children, refer to them using their ids only

With this approach, updating an item does not necessitate notifications to its lineage.

An item editor can easily modify the currently selected item without concerns about cascading changes or broadcasting updates across levels.

Check out the working demo: https://codesandbox.io/s/editable-tree-bo6msx?file=/src/App.vue

To keep things organized, the tree logic is abstracted into a store that offers methods for adding/removing/editing tree items.

This method's flexibility allows for potential modification to support multiple parents for an item if needed (mainly tweaking the removeChild method to search for all parents).

Answer 3

Answer №2

It's a good idea to avoid changing prop values passed down to child components. Instead, emit events from the children up to the root node (App.vue) and make changes to the tree structure there. This process is not too complex because arrays and objects are passed by reference, allowing you to emit the actual children array of the current TreeView node. App.vue can then push new items to that array, updating the appropriate section within tree without the need for searching.

In the snippet below, I maintain the hide/show toggle on the {{ label }} and include a new clickable span for adding a child node when clicked. This span emits the current children array. All TreeView nodes capture this emit and pass it up until it reaches App.vue, where the new child is actually added.

TreeView.vue

<template>
  <li>
    <div>
      <span @click="hideShow = !hideShow">{{ label }}</span>
      <span @click="$emit('addChild', children)">(add child)</span>
    </div>

    <div v-if="isOpen" class="child">
      <ul>
        <TreeView
          v-for="(child, i) in children"
          :key="i"
          :label="child.label"
          :perm="child.perm"
          :children="child.children"
          @add-child="$emit('addChild', $event)"
        />
      </ul>
    </div>
  </li>

App.vue

<template>
  <ul>
    <TreeView
      :label="tree.label"
      :perm="tree.perm"
      :children="tree.children"
      @add-child="addChild($event)"
    />
  </ul>
</template>

const addChild = item => {
  item.push({
    label: 'new item',
    perm: {},
    children: []
  });
};

By following this approach, App is able to update the same array in tree even though it is receiving an array via emit.

Answer 4

It's a good idea to avoid changing prop values passed down to child components. Instead, emit events from the children up to the root node (App.vue) and make changes to the tree structure there. This process is not too complex because arrays and objects are passed by reference, allowing you to emit the actual children array of the current TreeView node. App.vue can then push new items to that array, updating the appropriate section within tree without the need for searching.

In the snippet below, I maintain the hide/show toggle on the {{ label }} and include a new clickable span for adding a child node when clicked. This span emits the current children array. All TreeView nodes capture this emit and pass it up until it reaches App.vue, where the new child is actually added.

TreeView.vue

<template>
  <li>
    <div>
      <span @click="hideShow = !hideShow">{{ label }}</span>
      <span @click="$emit('addChild', children)">(add child)</span>
    </div>

    <div v-if="isOpen" class="child">
      <ul>
        <TreeView
          v-for="(child, i) in children"
          :key="i"
          :label="child.label"
          :perm="child.perm"
          :children="child.children"
          @add-child="$emit('addChild', $event)"
        />
      </ul>
    </div>
  </li>

App.vue

<template>
  <ul>
    <TreeView
      :label="tree.label"
      :perm="tree.perm"
      :children="tree.children"
      @add-child="addChild($event)"
    />
  </ul>
</template>

const addChild = item => {
  item.push({
    label: 'new item',
    perm: {},
    children: []
  });
};

By following this approach, App is able to update the same array in tree even though it is receiving an array via emit.

Guide on integrating an element into a different element in a Vue 3 Tree Viewer

Answer №1

Answer №2

Similar questions

Error: JSON parsing encountered an unexpected token at character 182704

Angular HTTP post is failing on the first attempt but succeeds on the second try

When you call Subscribe(), you will receive the output "complete: () => void; 'complete' is defined in this context. What exactly does this signify?

The Unusual Behavior of Typescript Partial Interfaces

Will the async pipe activate onPush change detection in Angular?

"Capture the selected option from a dropdown menu and display it on the console: A step-by-step

data not corresponding to interface

Vite HMR causes Vue component to exceed the maximum number of recursive updates

Error in ThreeJS: Unable to execute material.customProgramCacheKey

Tips for denoting unnecessary non-null assertions in Typescript

Do these exports serve the same purpose?

Is it possible to set up Vite/Rollup in a way that only triggers vue-tsc for dependencies that are utilized by the entrypoints?

Tips for streamlining code using switch statements in vue.js

Determining if an item is empty, undefined, or null in Angular: a guide

"Unlocking the treasure trove: Extracting a single item from my Firebase real-time database using

Taking control of a keyboard shortcut in Vue

Step-by-step guide on integrating async and await functionality into Vuetify rules using an ajax call

Tips for deleting on a numeric cell within ag-grid?

Issue: Child Pages not found in Nuxt RoutingDescription: When navigating

Semantic-ui-react cannot be located by Docker