Vue element tree component Custom Node content deletion Node does not update DOM problem

Prepaid graph. The element tree shown above can delete nodes

The process of deleting

is roughly to get the child node data through node.parent.data.children through the two received parameters node and data,
and then by traversing (const index = children.findIndex (d = > d.id = data.id)

get the index, of the node and execute children.splice (index, 1), which is exactly the same code but my DOM has not been updated (that is, it has not been deleted). I would like to ask the gods what"s going on. Thank you very much (it is useful to add, that is, delete or not update).

Html5 javascript
Jul.14,2021

I used JSON.parse (JSON.stringify (data)) to convert the entire deleted raw data.

my code: 

remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.treeData = JSON.parse(JSON.stringify(this.treeData))
    },

you need to take a look at your data structure. When I wrote it before, it was the same as you. Then I looked at the data and changed the children to const children = parent.childNodes | | parent instead of the official const children = parent.data.children | | parent.data and deal with

according to my own data structure.

Previous: How should vue-router click a link to jump to a non-nested route?

Next: The example of includes of data in ES6 is incomprehensible. There are no parameters when defining, but the call can pass parameters.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu