Cannot add data dynamically

[sdressler]

Hi,

I cannot add data dynamically to the graph. For instance I use the component like <tree id="tree" ref="tree" :data="treeData" node-text="name" layoutType="horizontal"></tree>. Data/methods look like:

[...]
data() {
  return {
      treeData: {
        name: 'foo',
        children: [],
      },
    };
  },
methods: {
  onUpdate() {
    console.log('on update');
    const newData = {
      children: [],
      name: 'foo',
    };
    this.$data.treeData.children.push(newData);
  },
},
[...]

When triggering onUpdate, I get the following error in Chrome:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'x' of undefined
    at e (index.js?74cc:1)
    at SVGPathElement.eval (index.js?74cc:2)
    at SVGPathElement.eval (attr.js?f872:29)
    at Selection.eval [as each] (each.js?cefe:5)
    at Selection.eval [as attr] (attr.js?f872:53)
    at VueComponent.updateGraph (index.js?74cc:2)
    at VueComponent.eval (index.js?74cc:2)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

Vue version is 2.6.10, Vue.D3.tree version is 5.1.0.

[David-Desmaisons]

Use the identifier props. Make sure that the identifier is consistent upon updates.

[sdressler]

Typical d'oh ... it works now. Thanks a lot.

[yasmineTYM]

Hi, could you please give me some details about the solution, I met the same problem and checked the documentation, but there is no example, I am not sure how to use " identifier"

[teklit-haphtu]

please share us the code on how to use identifier props

[David-Desmaisons]

https://github.com/David-Desmaisons/Vue.D3.tree/blob/master/example/tree/App.vue

https://david-desmaisons.github.io/Vue.D3.tree/tree

[teklit-haphtu]

@David-Desmaisons Thank you for the quick response. now it works