CODEWITHSUNDEEP
javascriptmongoosevue.jstreeelement-ui
Danylkaaa
Danylkaaa

Reputation: 161

Vue Element.ui tree, emit reload event

I create a SPA on Vue (something like a cloud disk), using the Element.ui tree component, to display the folder tree. The problem is that the tree itself does not load everything at once, but is loaded sequentially with the help of the lazy modifier.

The server part is mongoose + mongoose-path-tree. The use of the mongoose-path-tree means, that a tree storage scheme in the database is next: each node does not know about its children, but the children store their full path to the root element:

#root_id #subroot_id # ... #parent_id #this_id

The problem is that if the user makes changes to the tree (loads the file, creates a new folder, etc.) and the server accepts them, then how to notify the tree that it needs to load new data. Element ui in its documentation does not describe how to capture an event to cause the redrawing of a tree.

Client tree template

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 />

Loading new nodes

loadNode: async function (node, resolve) {
try {
  let firstGeneration = await foldersAPI.get(this.$store.state.user.myDrive);
  if (node.level === 0) {
    return resolve(firstGeneration.data.folder.children);
  } else {
    var data;
    if (node.data.hasChildren) {
      let children = await foldersAPI.get(node.data._id);
      console.log(children);
      data = children.data.folder.children;
    } else {
      data = [];
    }
    resolve(data);
  }
} catch (e) {
  console.log(e)
}

Upvotes: 9

Views: 5976

Answers (3)

Kai
Kai

Reputation: 849

you can set a key property to the component, and then, just change the key value, the component will re-render.

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 :key="myKey"
 />

read the doc for more details: https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

Upvotes: 0

Vladislav Gritsenko
Vladislav Gritsenko

Reputation: 813

Try to pass computed variable as prop for tree component. All changes in computed will trigger rerender of tree.

Upvotes: 0

dingoglotz
dingoglotz

Reputation: 2833

My solution was to simply rerender the treeview by adding the v-if attribute to the treeview and then creating a method

reload() {
    this.show = false;
    this.$nextTick(() => {
         this.show = true
    })
}

Calling that reload function then properly reloads the treeview

Upvotes: 6

Related Questions