Open sunh11373 opened 3 years ago
@sunh11373 Hi, Please have a look at the closed issue #54. Use the prop identifier can solve your problem.
Not sure how this can be resolved with "prop identifier". I need to replace the tree with a total different set of data with different number of nodes.
-thanks
Hi @sunh11373 @Joun-lee Did you solve the problem? If yes, could you please tell me how to do? I have a similar problem and I don't understand how to solve it with the props identifier
Hi, @NoAbdulrahman You can try my code below, see if it can solve your problem.
The html part
<tree
:data="currentRegionTree"
:duration="200"
node-text="name"
:identifier="getId" //this is a function defined in your 'methods' section
layoutType="horizontal"
type="tree"
:zoomable="true"
linkLayout="orthogonal"
></tree>
In the methods section of your vue component
getId(node) {
return node.id;
}
@Joun-lee Thanks, I used the identifier, I have no error now, but the tree is still not displayed. I don't know if I'm missing something. Here is my code if you could have a look. The html part:
<tree :data="tree" :identifier="getId" node-text="title" layoutType="horizontal"
type="tree" Duration="0" style="width:600px; height:600px" ...>
</tree>
The script:
export default Vue.extend({
name: "Products",
components: {
tree,
},
data() {
return {
tree:{}
};},
async created(){
const products = await this.FetchedData();
this.tree=products;
console.log(this.tree);
},
methods: {
async FetchedData(){
let response = await Service.getProducts()
let products = response.data.data;
products= JSON.stringify(products);
return products
},
getId(node) {
return node.id;
}, });
Hi, @NoAbdulrahman Not sure why, but i would suggest you first check the 'tree' value, does it comply with the rule? Might use some simple static data firstly to check that, for example use the data below
tree: {
name: "father",
children:[{
name: "son1",
children:[ {name: "grandson"}, {name: "grandson2"}]
},{
name: "son2",
children:[ {name: "grandson3"}, {name: "grandson4"}]
}]
}
@Joun-lee Thanks for your reply. The tree is displayed very well when I use my data as static, but it is not displayed when I try to fetch the same data from the API. The "console.log" in created() prints the data which means the data is fetched correctly, but I don't know why the tree is not displayed.
Hi @David-Desmaisons , Do you have an idea about my issue above?
Hi @NoAbdulrahman , usually I fetch data in the mounted function, maybe you can try do it in your mounted function.
Using mount or created should not make any diference. @NoAbdulrahman From waht you are describing nothing I can do. Try to check the example and apdat them. It looks like something related on the data you are using not the component itself.
My problem is solved by adding v-if=“dataLoaded” on the tree component and set the dataLoaded property to true loading the data. Also, I had to use json object instead of json string.
@NoAbdulrahman I have the same problem. It renders the first time but when I completely change the dataset I get the same error. If the Vue component is destroyed then recreated it works, but you can't just change the data. I did this by applying a key to the tree and changing it everytime the dataset changed
Is it possible to replace the entire tree?
If I do it naively as below:
I got similar error:
Btw, if myTree is initially null, it works.
-thanks