Doesn't work with data from the server

Hi, thanks for this tool, it’s amazing. Unfortunately, i have a little problem , It doesn’t work with dynamic data, maybe something i made wrong ? Here is my code

<template>
<tree
        ref="tree"
        :data="treeData"
  />
</template>

<script>
...
    data: () => ({
      treeData: []
    }),
    mounted: function () {
       this.getTreeData()
    },
    methods: {
       getTreeData() {
             var self = this
             axios.get('http://localhost:8082/files')
             .then((response) => {
                       self.treeData = response.data
              })
             .catch((err) => {
                console.log('Error : ' + err)
             })
       }
...
</script>

Thank you !

[ijpatricio]

Hello, so I understood now.

The “data” prop passed, gets copied to a new object, inside the TreeRoot.vue component (node_modules folder, for backend developers better understanding)

This happens because props are immutable, so to maniputate data, the component copies to internal component “data” key.

After server loading, even computed propertie… the empty array was already copied. Check this by analyzing vue dev tools… the component model key will be empty.

Ok, quick fix. Have the component with a v-if directive

This way, “when you will enable it to show”, it will mount the component again, and props wil be already set, and properly copied!

PS: Very IMPORTANT to use v-if and not v-show!! v-if detaches from virtual dom on toggling, and v-show only changes style to “display: none”

[amsik]

Yeah. You are totally right. I have to copy recieved data to a new object because tree uses a its own structure. I think about adding watchers and get rid of this approach… but I will do it later.

That’s why we have a several approaches:

• Store (Vuex)
• Async data
• API for nodes manipulating